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;