import React, { useState } from 'react';
import { useSelector } from "react-redux";
import { buildClassName } from '../../../shared/utils/class-util';
import { GroupedFlightDetails } from "../../types";
import { selectTranslations } from "../booking/selectors";
import { getDateText } from '../sidebar/sidebar-util';
import Icon from '../../components/icon';

interface FlightOptionFlightProps {
  details: GroupedFlightDetails,
  isOptionsVisible: boolean;
}

const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({
  details,
  isOptionsVisible
}) => {
  const translations = useSelector(selectTranslations);

  const [isDetailVisible, setIsDetailVisible] = useState<boolean>(false);

  return (
    <div className="flight__flight">
      <div className="flight__flight__container">
        <div className="flight__flight__wrapper">
          <div className="flight__logo__wrapper">
            <img src={`https://media.tidesoftware.be/media/shared/Airlines/${details.airlineCode}.png?height=256`} alt="" className="flight__logo" />
            <span>{details.airline}</span>
          </div>
          <div className="flight__info">
            <div className="flight__info__times">
              <strong>{details.departureTime} {details.departureAirport}</strong>
              <p>{getDateText(details.departureDate)}</p>
            </div>
            <div className="flight__info__duration">
              <p>{details.travelDuration}</p>
              <div className="flight__info__duration__stops">
                <div className="flight__info__duration__stop"></div>
              </div>
              {details.numberOfStops > 0 && (
                <span>{details.numberOfStops} {translations.FLIGHTS_FORM.FLIGHT_STOPS}</span>
              )}
            </div>
            <div className="flight__info__times flight__info__times--arrival">
              <strong>{details.arrivalTime} {details.arrivalAirport}</strong>
              <p>{getDateText(details.arrivalDate)}</p>
              {details.isNextDay && (
                <span className="flight__info__times__days">{translations.FLIGHTS_FORM.PLUS_ONE_DAY}</span>
              )}
            </div>
          </div>
        </div>
        <div className="flight__detail__btn__wrapper">
          <div className={buildClassName(["flight__detail__btn", isDetailVisible && "flight__detail__btn--active"])} onClick={() => setIsDetailVisible(!isDetailVisible)}>
            <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
          </div>
        </div>
      </div>
      <div className={buildClassName(["flight__detail", isDetailVisible && "flight__detail--active"])}>
        {details.flightLines.map((flightLine, flightLineIndex) => (
          <React.Fragment key={flightLineIndex}>
            <div className="flight__info">
              <div className="flight__info__times__wrapper">
                <div className="flight__info__times">
                  <p>{flightLine.departureTime}</p>
                  <strong>{flightLine.departureAirport}</strong>
                  <p>{getDateText(flightLine.departureDate)}</p>
                </div>
                <div>
                  <Icon name="ui-plane-depart" width={30} height={20} />
                </div>
              </div>
              <div className="flight__info__duration">
                <p>{flightLine.travelDuration}</p>
                <div className="flight__info__duration__stops"></div>
                <span>{flightLine.airline}</span>
                <strong>{flightLine.number}</strong>
              </div>
              <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
                <div>
                  <Icon name="ui-plane-arrive" width={30} height={20} />
                </div>
                <div className="flight__info__times flight__info__times--arrival">
                  <p>{flightLine.arrivalTime}</p>
                  <strong>{flightLine.arrivalAirport}</strong>
                  <p>{getDateText(flightLine.arrivalDate)}</p>
                </div>
              </div>
            </div>
            {flightLine.waitDuration && (
              <div className="flight__info">
                <div className="flight__info__times">
                </div>
                <div className="flight__info__duration flight__info__duration--waittime">
                  <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
                    <Icon name="ui-clock" width={24} height={24} />
                  </div>
                  <div className="flight__info__duration__stoptime">
                    <span>{translations.FLIGHTS_FORM.STOP_TIME}</span>
                    <strong>{flightLine.waitDuration}</strong>
                  </div>
                </div>
                <div className="flight__info__times flight__info__times--arrival">
                </div>
              </div>
            )}
          </React.Fragment>
        ))}
      </div>
      <div className={buildClassName(["flight__rate", isOptionsVisible && "flight__rate--active"])}>
        {/*<div className="flight__rate__container">
          <div className="flight__rate__title">
            <h2><strong>{translations.FLIGHTS_FORM.OUTWARD_FLIGHT}</strong></h2>
            <h2>{translations.FLIGHTS_FORM.CHOOSE_YOUR_CLASS}</h2>
          </div>
          <div className="flight__rate__wrapper">
            <div className={`flight__rate__card ${isCardActive ? 'flight__rate__card--active' : ''}`} onClick={handleCardButtonClick}>
              <div className="flight__rate__card__header">
                <h3 className="flight__rate__card__header__title">Economy</h3>
              </div>
              <div className="flight__rate__card__content">
                <div className="flight__rate__card__chairs">
                  <span>nog 2 stoelen vrij</span>
                </div>
                <div className="flight__rate__card__lowest">
                  <span>Laagste prijs</span>
                </div>
                <div className="flight__rate__card__item">
                  <span>€ 275 p.p</span>                  
                  <Icon name="chevron" width={20} height={20} />
                </div>
              </div>
            </div>
            <div className={`flight__rate__card flight__rate__card--premium ${isCard2Active ? 'flight__rate__card--premium--active' : ''}`} onClick={handleCard2ButtonClick}>
              <div className="flight__rate__card__header">
                <h3 className="flight__rate__card__header__title">Economy premium</h3>
              </div>
              <div className="flight__rate__card__content">
                <div className="flight__rate__card__chairs">
                  <span>nog 2 stoelen vrij</span>
                </div>
                <div className="flight__rate__card__item">
                  <span>€ 960 p.p</span>
                  <Icon name="chevron" width={20} height={20} />
                </div>
              </div>
            </div>
            <div className={`flight__rate__card flight__rate__card--business ${isCard3Active ? 'flight__rate__card--business--active' : ''}`} onClick={handleCard3ButtonClick}>
              <div className="flight__rate__card__header">
                <h3 className="flight__rate__card__header__title">Business</h3>
              </div>
              <div className="flight__rate__card__content">
                <div className="flight__rate__card__chairs">
                  <span>nog 2 stoelen vrij</span>
                </div>
                <div className="flight__rate__card__item">
                  <span>€ 3.060 p.p</span>
                  <Icon name="chevron" width={20} height={20} />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={`flight__rate__detail ${isCardActive ? 'flight__rate__detail--active' : ''}`}>
          <div className="flight__rate__modal__card">
            <div className="flight__rate__modal__card__wrapper">
              <div className="flight__rate__modal__card__header">
                <h3 className="flight__rate__modal__card__header__title">Economy Basic</h3>
                <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
              </div>
              <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
                <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
                  <Icon name="ticket" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Wijzigingen in het ticket</strong>
                    <p>Wijzigingen toestaan</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
                  <Icon name="payback" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Terugbetaling van ticket</strong>
                    <p>Ticket retourneerbaar</p>
                  </div>
                </div>
              </div>
              <div className="flight__rate__modal__card__items">
                <div className="flight__rate__modal__card__item">
                  <Icon name="shopping-bag" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>persoonlijke items</strong>
                    <p>Gratis</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="backpack" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Handbagage</strong>
                    <p>Gratis: 2 x 8kg</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="suitcase" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Ingecheckte bagage</strong>
                    <p>Gratis: 2 x 32kg</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="flight__rate__modal__card__footer">
              <button className="cta cta--secondary">Selecteer</button>
              <span className="price price--increase">€2.460</span>
            </div>
          </div>
          <div className="flight__rate__modal__card flight__rate__modal__card--premium">
            <div className="flight__rate__modal__card__wrapper">
              <div className="flight__rate__modal__card__header">
                <h3 className="flight__rate__modal__card__header__title">Premium Economy Basic Plus</h3>
                <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
              </div>
              <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
                <div className="flight__rate__modal__card__item">
                  <Icon name="ticket" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Wijzigingen in het ticket</strong>
                    <p>Wijzigingen toestaan</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="payback" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Terugbetaling van ticket</strong>
                    <p>Ticket retourneerbaar</p>
                  </div>
                </div>
              </div>
              <div className="flight__rate__modal__card__items">
                <div className="flight__rate__modal__card__item">
                  <Icon name="shopping-bag width={20} height={20}" />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>persoonlijke items</strong>
                    <p>Gratis</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="backpack" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Handbagage</strong>
                    <p>Gratis: 2 x 8kg</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="suitcase" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Ingecheckte bagage</strong>
                    <p>Gratis: 2 x 32kg</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="flight__rate__modal__card__footer">
              <button className="cta cta--secondary">Selecteer</button>
              <span className="price price--increase">€.2460</span>
            </div>
          </div>
          <div className="flight__rate__modal__card flight__rate__modal__card--business">
            <div className="flight__rate__modal__card__wrapper">
              <div className="flight__rate__modal__card__header">
                <h3 className="flight__rate__modal__card__header__title">Business Basic Plus</h3>
                <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
              </div>
              <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
                <div className="flight__rate__modal__card__item">
                  <Icon name="ticket" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Wijzigingen in het ticket</strong>
                    <p>Wijzigingen toestaan</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
                  <Icon name="payback" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Terugbetaling van ticket</strong>
                    <p>Ticket retourneerbaar</p>
                  </div>
                </div>
              </div>
              <div className="flight__rate__modal__card__items">
                <div className="flight__rate__modal__card__item">
                  <Icon name="shopping-bag" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>persoonlijke items</strong>
                    <p>Gratis</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="backpack" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Handbagage</strong>
                    <p>Gratis: 2 x 8kg</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="suitcase" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Ingecheckte bagage</strong>
                    <p>Gratis: 2 x 32kg</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="seat-selection" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Stoelselectie</strong>
                    <p>kies uw stoel in het vliegtijg</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="check-in" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Sneller inchecken</strong>
                    <p>Sla de wachtrijen voor de veiligheidscontrole over</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="business-lounge" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Zakenlunge</strong>
                    <p>Ontspan voor uw vlucht</p>
                  </div>
                </div>
                <div className="flight__rate__modal__card__item">
                  <Icon name="priority" width={20} height={20} />
                  <div className="flight__rate__modal__card__item__wrapper">
                    <strong>Prioriteit</strong>
                    <p>Stap voor anderen aan boord</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="flight__rate__modal__card__footer">
              <button className="cta cta--secondary">Selecteer</button>
              <span className="price price--increase">+ €2.460</span>
            </div>
          </div>
        </div>
        */}
      </div>
    </div>
  );
}

export default FlightOptionFlight;