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

interface SidebarFlightProps {
  title: string;
  flightMetaData: BookingPackageFlightMetaData;
  translations?: any;
}

const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flightMetaData, translations }) => {
  const flightLines = parseFlightLines(flightMetaData);
  const firstFlight = first(flightLines);
  const lastFlight = last(flightLines);

  return (
    <div className="pricing-summary__group">
      <h6 className="pricing-summary__title">{title}</h6>
      <div className="pricing-summary__row">
        <div className="pricing-summary__property">{translations.SIDEBAR.FLIGHT_DEPARTURE}</div>
        <div className="pricing-summary__value pricing-summary__value--flight">
          {firstFlight?.departureAirportDescription} ({firstFlight?.departureAirportIata})<br />
          {getDateText(firstFlight?.departureDate)} {firstFlight?.departureTime}
          <br />
          {firstFlight?.airlineCode}
          {firstFlight?.number}
        </div>
      </div>

      <div className="pricing-summary__row">
        <div className="pricing-summary__property">{translations.SIDEBAR.FLIGHT_ARRIVAL}</div>
        <div className="pricing-summary__value pricing-summary__value--flight">
          {lastFlight?.arrivalAirportDescription} ({lastFlight?.arrivalAirportIata})<br />
          {getDateText(lastFlight?.arrivalDate)} {lastFlight?.arrivalTime}
          <br />
          {lastFlight?.airlineCode}
          {lastFlight?.number}
        </div>
      </div>

      <div className="pricing-summary__row">
        <div className="pricing-summary__property">
          {flightMetaData.flightLines.length > 1 && (
            <i>
              {flightMetaData.flightLines.length - 1}
              {'x '}
              {translations.SIDEBAR.CHANGES}
            </i>
          )}
        </div>
        <div className="pricing-summary__value">{getAirlines(flightLines)}</div>
      </div>
      {flightMetaData.luggageIncluded && (
        <div className="pricing-summary__row">
          <div className="pricing-summary__property"></div>
          <div className="pricing-summary__value">{translations.SIDEBAR.LUGGAGE_INCLUDED}</div>
        </div>
      )}
    </div>
  );
};

export default SidebarFlight;