import {
  AirlineBookingPackageOption,
  AirportBookingPackageOption,
  BookingAirlineGroup,
  BookingAirportGroup,
  BookingOptionGroup,
  BookingOptionPax,
  BookingPackagePax,
  PerPaxPackageOption,
} 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 {
  selectBookingPackagePax,
  selectDepartureFlight,
  selectReturnFlight,
  selectTranslations,
} from "../booking/selectors";
import { CHILD_MAX_AGE } from "../travelers-form/travelers-form-slice";
import OptionPaxGroup from "./option-pax-group";
import OptionBookingAirlineGroup from "./option-booking-airline-group";

interface OptionPaxCardProps {
  pax: BookingOptionPax[];
  requestRoomsPax?: BookingPackagePax[];
  parentIndex?: number;
  onPaxChange?: (pax: BookingOptionPax[], index?: number) => void;
}

const OptionPaxCard: React.FC<OptionPaxCardProps> = ({
  pax,
  requestRoomsPax,
  parentIndex,
  onPaxChange,
}) => {
  const [toggleStates, setToggleStates] = useState<boolean[]>();
  const translations = useSelector(selectTranslations);
  const departureFlight = useSelector(selectDepartureFlight);
  const returnFlight = useSelector(selectReturnFlight);

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

  const bookingPax = useSelector(selectBookingPackagePax);

  const getPaxName = (bookingOptionPax: BookingOptionPax) => {
    const item = bookingPax.find((x) => x.id === bookingOptionPax.id);
    if (!item?.firstName && !item?.lastName) {
      return bookingOptionPax?.paxName;
    }
    return `${item?.firstName} ${item?.lastName}`;
  };

  const onGroupChange = (
    group: BookingOptionGroup<PerPaxPackageOption>,
    paxId: number
  ) => {
    const updatedPax = pax.map((p) => {
      return p.id !== paxId
        ? p
        : {
            ...p,
            groups: p.groups.map((pg) => {
              return pg.name !== group.name ? pg : group;
            }),
          };
    });

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

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

  const handleOnAirlineGroupChange = (
    group: BookingAirlineGroup<AirlineBookingPackageOption>,
    paxId: number
  ) => {
    const updatedPax = pax.map((p) => {
      return p.id !== paxId
        ? p
        : {
            ...p,
            airlineGroups: p.airlineGroups.map((g) =>
              g.label === group.label ? group : g
            ),
          };
    });

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

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

  const handleOnAirportGroupChange = (
    group: BookingAirportGroup<AirportBookingPackageOption>,
    paxId: number
  ) => {
    const updatedPax = pax.map((p) => {
      return p.id !== paxId
        ? p
        : {
            ...p,
            airportGroups: p.airportGroups.map((g) =>
              g.label === group.label ? group : g
            ),
          };
    });

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

  return (
    <>
      {pax.map((p, i) => (
        <div
          key={i}
          className={buildClassName([
            "booking-card__group",
            toggleStates && toggleStates[i] && "booking-card__group--active",
          ])}
        >
          <div className="booking-card__group-header">
            <h3 className="booking-card__body-heading">{getPaxName(p)}</h3>
            {requestRoomsPax?.find((x) => x.id == p.id)?.age && (
              <p className="form__region-label">
                {requestRoomsPax.find((x) => x.id == p.id)?.age! > CHILD_MAX_AGE
                  ? translations.TRAVELERS_FORM.ADULT
                  : translations.TRAVELERS_FORM.CHILD}
              </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] && (
            <>
              {p.groups.map(
                (pg) =>
                  pg && (
                    <OptionPaxGroup
                      key={pg.name}
                      paxId={p.id}
                      group={pg}
                      firstClassName={"booking-card__group-body"}
                      secondClassName={"booking-card__group-heading"}
                      parentId={`${p.id}_${pg.name}`}
                      onGroupChange={onGroupChange}
                    />
                  )
              )}
              {getAirlineGroups(p).map((group, i) => (
                <OptionBookingAirlineGroup
                  key={`${group.label}_${i}`}
                  airGroup={group}
                  onGroupChange={(updatedGroup) => {
                    handleOnAirlineGroupChange(updatedGroup, p.id);
                  }}
                />
              ))}
              {getAirportGroups(p).map((group, i) => (
                <OptionBookingAirlineGroup
                  key={`${group.label}_${i}`}
                  airGroup={group}
                  onGroupChange={(updatedGroup) => {
                    handleOnAirportGroupChange(updatedGroup, p.id);
                  }}
                />
              ))}
            </>
          )}
        </div>
      ))}
    </>
  );
};

export default OptionPaxCard;