import { BookingPackageFlight } 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;
  flight: BookingPackageFlight;
}

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

  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}
        </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}
        </div>
      </div>

      <div className="pricing-summary__row">
        <div className="pricing-summary__property">
          {flight.flightMetaData.flightLines.length > 1 && (
            <i>
              {flight.flightMetaData.flightLines.length - 1}
              {"x "}
              {translations.SIDEBAR.CHANGES}
            </i>
          )}
        </div>
        <div className="pricing-summary__value">{getAirlines(flightLines)}</div>
      </div>
      {flight.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;