import { useLoaderData } from 'react-router';
import { ICustomerDashboardData } from '../../../services/Dashboard/CustomerDashboard';
import { IAirlineDashboardData } from '../../../services/Dashboard/AirlineDashboard';
import FlightCard from '../FlightCard/FlightCard';
import FlightCreationForm from '../../FlightCreationForm/FlightCreationForm';
import './Flights.scss';

function Flights() {
  const data = useLoaderData() as ICustomerDashboardData | IAirlineDashboardData;

  if (data.type === 'customer') {
    return (
      <>
        <div className='flights'>
          <div className='flex-row'>
            <span className='flights-title'>Upcoming Flights</span>
            <button type='submit' className='view-more'>View more</button>
          </div>
          <div className='flight-list'>
            {data.upcomingFlights.length > 0
              ? data.upcomingFlights.map((flight) => {
                  return <FlightCard key={flight.id} flight={flight}></FlightCard>
                })
              : <div>No Upcoming Flights</div>}
          </div>
        </div>
  
        <div className='flights'>
          <div className='flex-row'>
            <span className='flights-title'>Flights History</span>
            <button type='submit' className='view-more'>View more</button>
          </div>
          <div className='flight-list'>
            {data.upcomingFlights.length > 0
              ? data.flightsHistory.map((flight) => {
                  return <FlightCard key={flight.id} flight={flight}></FlightCard>
                })
              : <div>No Flights History</div>}
          </div>
        </div>
      </>
    );
  } else {
    return (
      <>
        <div>
          <FlightCreationForm></FlightCreationForm>
        </div>
      </>
    );
  }

}

export default Flights;