import {
  AirlineBookingPackageOption,
  AirportBookingPackageOption,
  BookingAirlineGroup,
  BookingAirportGroup,
  BookingOptionGroup,
  BookingOptionUnit,
  PerUnitPackageOption,
} from "@qite/tide-client/build/types";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { buildClassName } from "../../../shared/utils/class-util";
import { selectDepartureFlight, selectReturnFlight, selectTranslations } from "../booking/selectors";
import OptionBookingAirlineGroup from "./option-booking-airline-group";
import OptionUnitGroup from "./option-unit-group";

interface OptionUnitsCardProps {
  units: BookingOptionUnit[];
  parentIndex?: number;
  onUnitsChange?: (units: BookingOptionUnit[], index?: number) => void;
}

const OptionUnitsCard: React.FC<OptionUnitsCardProps> = ({
  units,
  parentIndex,
  onUnitsChange,
}) => {
  const [toggleStates, setToggleStates] = useState<boolean[]>();
  const translations = useSelector(selectTranslations);
  const departureFlight = useSelector(selectDepartureFlight);
  const returnFlight = useSelector(selectReturnFlight);

  useEffect(() => {
    if (!toggleStates || toggleStates.length !== units.length) {
      setToggleStates(units.map(() => true));
    }
  }, [units, toggleStates, setToggleStates]);

  const getUnitPaxLabel = (unitIndex: number) => {
    return "";
  };

  const onGroupChange = (
    group: BookingOptionGroup<PerUnitPackageOption>,
    unitIndex: number
  ) => {
    const updatedUnits = units.map((u) => {
      return u.index !== unitIndex
        ? u
        : {
          ...u,
          groups: u.groups.map((ug) => {
            return ug.name !== group.name ? ug : group;
          }),
        };
    });

    if (onUnitsChange) onUnitsChange(updatedUnits, parentIndex);
  };

  const getAirlineGroups = (p: BookingOptionUnit) => {
    return p.airlineGroups
      .filter(x => x.flightIds.includes(departureFlight?.entryLineGuid ?? "") || x.flightIds.includes(returnFlight?.entryLineGuid ?? ""));
  }

  const handleOnAirlineGroupChange = (
    group: BookingAirlineGroup<AirlineBookingPackageOption>,
    unitIndex: number
  ) => {
    const updatedPax = units.map((u) => {
      return u.index !== unitIndex
        ? u
        : {
          ...u,
          airlineGroups: u.airlineGroups.map((g) =>
            g.label === group.label ? group : g
          )
        }
    });

    if (onUnitsChange) onUnitsChange(updatedPax, parentIndex);
  };

  const getAirportGroups = (p: BookingOptionUnit) => {
    return p.airportGroups
      .filter(x => x.flightIds.includes(departureFlight?.entryLineGuid ?? "") || x.flightIds.includes(returnFlight?.entryLineGuid ?? ""));
  }

  const handleOnAirportGroupChange = (
    group: BookingAirportGroup<AirportBookingPackageOption>,
    unitIndex: number
  ) => {
    const updatedPax = units.map((u) => {
      return u.index !== unitIndex
        ? u
        : {
          ...u,
          airportGroups: u.airportGroups.map((g) =>
            g.label === group.label ? group : g
          )
        }
    });

    if (onUnitsChange) onUnitsChange(updatedPax, parentIndex);
  };

  return (
    <>
      {units.map((u, i) => (
        <div
          className={buildClassName([
            "booking-card__group",
            toggleStates && toggleStates[i] && "booking-card__group--active",
          ])}
        >
          <div className="booking-card__group-header">
            <h3 className="booking-card__body-heading">
              {translations.OPTIONS_FORM.UNIT_TITLE} {u.index + 1}
            </h3>
            <p>{getUnitPaxLabel(u.index)}</p>
            <div className="booking-card__actions">
              <button
                type="button"
                className="booking-card__toggle"
                onClick={() => {
                  setToggleStates(
                    toggleStates?.map((s, si) => (si == i ? !s : s))
                  );
                }}
              ></button>
            </div>
          </div>
          {toggleStates &&
            toggleStates[i] && (
              <>
                {u.groups.map(
                  (ug) =>
                    ug && (
                      <OptionUnitGroup
                        key={ug.name}
                        unitIndex={u.index}
                        group={ug}
                        firstClassName={"booking-card__group-body"}
                        secondClassName={"booking-card__group-heading"}
                        parentId={`${u.index}_${ug.name}`}
                        onGroupChange={onGroupChange}
                      />
                    )
                )}
                {getAirlineGroups(u).map((group, i) => (
                  <OptionBookingAirlineGroup
                    key={`${group.label}_${i}`}
                    airGroup={group}
                    onGroupChange={(updatedGroup) => {
                      handleOnAirlineGroupChange(updatedGroup, u.index)
                    }} />
                ))}
                {getAirportGroups(u).map((group, i) => (
                  <OptionBookingAirlineGroup
                    key={`${group.label}_${i}`}
                    airGroup={group}
                    onGroupChange={(updatedGroup) => {
                      handleOnAirportGroupChange(updatedGroup, u.index)
                    }} />
                ))}
              </>
            )}
        </div>
      ))}
    </>
  );
};

export default OptionUnitsCard;