import React, { useState } from 'react';
import { useSelector } from "react-redux";
import { buildClassName } from '../../../shared/utils/class-util';
import { getPriceDifferenceText } from "../../../shared/utils/localization-util";
import { GroupedFlights } from "../../types";
import { selectTranslations } from "../booking/selectors";
import FlightOptionFlight from './flight-option-flight';

interface FlightOptionProps {
  item: GroupedFlights;
  isSelected: boolean;
  currentPrice: number;
  onChange: (item: GroupedFlights) => void;
}

const FlightOption: React.FC<FlightOptionProps> = ({
  item,
  isSelected,
  currentPrice,
  onChange
}) => {
  const translations = useSelector(selectTranslations);

  const ownTotalPrice = item.selectedOutward.price + item.selectedReturn.price
  const priceDifference = item.isSelected
    ? 0
    : ownTotalPrice - currentPrice;

  const [outwardVisible] = useState<boolean>(false);
  const [returnVisible] = useState<boolean>(false);

  const handleButtonClick = () => {
    if (!item.isSelected) onChange(item)
  };

  return (
    <div className="flight__option">
      <div className="flight__content">
        <div className="flight__flights">
          <div className="flight__flight">
            <div className="flight__flight__header">
              <div className="flight__status__container">
              </div>
              <div className="flight__price">
                {!isSelected && (
                  <span className={buildClassName(["price",
                    priceDifference > 0 && "price--increase",
                    priceDifference < 0 && "price--decrease"
                  ])}>{getPriceDifferenceText(priceDifference)}</span>
                )}
                <button type="button" className={`cta ${isSelected ? 'cta--selected' : 'cta--select'}`} onClick={handleButtonClick}>
                  {isSelected ? translations.SHARED.SELECTED : translations.SHARED.SELECT}
                </button>
              </div>
            </div>
          </div>
          <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
          <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} />
        </div>
      </div>
    </div>

  );
}

export default FlightOption;