import React from 'react';
import { FlightLeg } from '../../types';
import { formatDate, formatTime } from '../../../shared/utils/localization-util';
import FlightPath from './flight-path';
import FlightBannerComponent from './flight-banner';

interface FlightLegProps {
  leg: FlightLeg;
}

const FlightLegComponent: React.FC<FlightLegProps> = ({ leg }) => {
  return leg ? (
    <div className="search__flight-card-content-top">
      <div className="search__flight-card-content">
        <div className="search__flight-card-content-start">
          <div className="search__flight-card-content-start-time">
            <svg className="search__flight-card-content-icon" id="search-flightLeg-plane-depart-icon" viewBox="0 0 11.477 9.98" width={11.48} height={9.98}>
              <path
                id="connecting_airports_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
                d="M106.978-871.035l-2.245-3.493h-2.994a1.2,1.2,0,0,1-.884-.364,1.2,1.2,0,0,1-.364-.884,1.2,1.2,0,0,1,.364-.884,1.2,1.2,0,0,1,.884-.364H104.4l2.578-3.992h1.5l-1.247,3.992h2.162l1.081-1.5h1.5l-1,2.744,1,2.744h-1.5l-1.081-1.5h-2l1.081,3.493Z"
                transform="translate(111.967 -871.035) rotate(180)"
                fill="#57abb2"
              />
            </svg>
            <h5>{formatTime(leg.departureDateTime)}</h5>
          </div>
          <p className="search__flight-card-content-start-destination">{leg.departureAirport}</p>
          <p className="search__flight-card-content-start-date">{formatDate(leg.departureDateTime)}</p>
        </div>

        <div className="search__flight-card-content-stops">
          <p className="search__flight-card-content-stops-info-hour">{leg.duration}</p>
          <FlightPath stops={leg.stops} />
          <div className="search__flight-card-content-stops-info">
            <svg className="search__flight-card-content-icon" id="search-flightLeg-stop-icon" viewBox="0 0 14.969 10.978" width={14.97} height={10.98}>
              <path
                id="airline_stops_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
                d="M101.738-733.022v-1.5h1.5a5.842,5.842,0,0,0-2.162-4.647A7.583,7.583,0,0,0,96-741.006v-1.5a9.357,9.357,0,0,1,4.709,1.237,7.929,7.929,0,0,1,3.275,3.5,8.25,8.25,0,0,1,2-2.692A20.272,20.272,0,0,1,108.7-742.5h-3.223V-744h5.489v5.489h-1.5v-2.724a13.531,13.531,0,0,0-3.327,2.838,5.83,5.83,0,0,0-1.414,3.878h1.5v1.5Z"
                transform="translate(-96 744)"
                fill="#57abb2"
              />
            </svg>
            <p className="search__flight-card-content-stops-info-text">
              {leg.stops} stop{leg.stops !== 1 ? 's' : ''}
            </p>
          </div>
        </div>

        <div className="search__flight-card-content-end">
          <h5 className="search__flight-card-content-end-time">{formatTime(leg.arrivalDateTime)}</h5>
          <p className="search__flight-card-content-end-destination">{leg.arrivalAirport}</p>
          <p className="search__flight-card-content-end-date">{formatDate(leg.arrivalDateTime)}</p>
        </div>
      </div>

      <FlightBannerComponent tag={leg.airline} luggageIncluded={leg.luggageIncluded} />
    </div>
  ) : null;
};

export default FlightLegComponent;