import React, { useEffect, useState } from "react";
import { useFetchDeparture } from "../../hooks/useFetchDeparture";
import { Flight } from "../../Types";
import './Page.css'
import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table';
import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css';

interface Props {
    flights?: Flight[];
}

export const Departure: React.FC<Props> = (props) => {
    let origin = process.env.REACT_APP_ORIGIN;

    const { zones, error } = useFetchDeparture(origin);
    const [startIndex, setStartIndex] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            if (zones.length <= 10) {
                return;
            }
            setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10));
        }, 5000);

        return () => clearInterval(interval);
    }, [zones]);


    return (
        <div >
            <h2>Departure</h2>
            <div className="Items">
                <Table>
                    <Thead>
                        <Tr>
                            <Th>Code</Th>
                            <Th>Time</Th>
                            <Th>Destination</Th>
                            <Th>Gate</Th>
                            <Th>Status</Th>
                        </Tr>
                    </Thead>
                    <Tbody>
                        {zones.length > 0 && (
                            <>
                                {zones.slice(startIndex, startIndex + 10).map((flight) => (
                                    <Tr key={flight.id} className={flight.status === 'Delayed' ? 'delayed-flight' : ''}>
                                        <Td>{flight.flight_code}</Td>
                                        <Td>{flight.departure_time}</Td>
                                        <Td>{flight.destination}</Td>
                                        <Td>{flight.gate}</Td>
                                        <Td>{flight.status}</Td>
                                    </Tr>
                                    // );
                                ))}
                                {startIndex + 10 >= zones.length && (
                                    <>
                                        {Array.from({ length: startIndex + 10 - zones.length }).map((_, index) => {
                                            return (
                                                <Tr key={index}>
                                                    <Td></Td>
                                                    <Td></Td>
                                                    <Td></Td>
                                                    <Td></Td>
                                                    <Td></Td>
                                                </Tr>
                                            )
                                        })}
                                    </>
                                )
                                }
                            </>
                        )}
                    </Tbody>
                </Table>
                {error ? <div className="Disconnected">{error}</div> : <></>}
            </div>
        </div>
    );
};