import { BookingPackageFlightMetaData } from '@qite/tide-client/build/types';
import React from 'react';
import { useSelector } from 'react-redux';
import { selectTranslations } from '../booking/selectors';
import { getDateText, parseFlightLines } from '../sidebar/sidebar-util';

interface SummaryFlightProps {
  flightMetaData: BookingPackageFlightMetaData;
  header: string;
}

const SummaryFlight: React.FC<SummaryFlightProps> = ({ flightMetaData, header }) => {
  const translations = useSelector(selectTranslations);

  return (
    <li>
      <h6>{header}</h6>
      {parseFlightLines(flightMetaData)?.map((flightLine) => (
        <p key={flightLine.departureAirportIata}>
          {flightLine.departureAirportDescription} ({flightLine.departureAirportIata}) &gt; {flightLine.arrivalAirportDescription} (
          {flightLine.arrivalAirportIata}) {' - '}
          {flightLine.travelClass} {' - '}
          {flightLine.airlineCode}
          {flightLine.number}
          <br />
          {getDateText(flightLine.departureDate)} {flightLine.departureTime} &gt; {getDateText(flightLine.arrivalDate)} {flightLine.arrivalTime}
          <br />
          {flightLine.airlineDescription}
        </p>
      ))}
      {flightMetaData.luggageIncluded && <p>{translations.SIDEBAR.LUGGAGE_INCLUDED}</p>}
    </li>
  );
};

export default SummaryFlight;