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;