import { BookingPackageFlight } from '@qite/tide-client/build/types';
import { Link, useNavigate } from 'react-router-dom';
import React, { useContext, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { buildClassName } from '../../../shared/utils/class-util';
import SettingsContext from '../../settings-context';
import { useAppDispatch } from '../../store';
import { setCurrentStep, setPackage, setPackageRooms } from '../booking/booking-slice';
import { FLIGHT_OPTIONS_FORM_STEP, OPTIONS_FORM_STEP } from '../booking/constants';
import {
  selectAccommodationViews,
  selectAvailabilities,
  selectBookingQueryString,
  selectIsFetchingProductOptions,
  selectPackageDetails,
  selectPackageRooms,
  selectTranslations
} from '../booking/selectors';
import { fetchPriceDetails } from '../price-details/price-details-slice';
import { buildSelectableRooms, updatePackageRooms } from './room-utils';
import TravelerRooms from './traveler-rooms';

interface RoomOptionsFormProps {}

const RoomOptionsForm: React.FC<RoomOptionsFormProps> = () => {
  const settings = useContext(SettingsContext);
  const navigate = settings.skipRouter ? () => {} : useNavigate();

  const translations = useSelector(selectTranslations);
  const dispatch = useAppDispatch();
  const packageDetails = useSelector(selectPackageDetails);
  const packageRooms = useSelector(selectPackageRooms);
  const availabilities = useSelector(selectAvailabilities);
  const bookingQueryString = useSelector(selectBookingQueryString);
  const accommodationViews = useSelector(selectAccommodationViews);
  const isLoading = useSelector(selectIsFetchingProductOptions);

  const rooms = buildSelectableRooms(packageRooms!, settings.accommodations, settings.regimes, accommodationViews);

  const goPrevious = () => {
    dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
  };

  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
    if (settings.skipRouter) {
      dispatch(setCurrentStep(OPTIONS_FORM_STEP));
    } else {
      navigate(`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.options.pathSuffix}?${bookingQueryString}`);
    }

    e.preventDefault();
  };

  const handleOnRoomChange = (index: number, accommodationCode: string, regimeCode: string | null) => {
    if (!packageRooms) return;

    const updatedPackageRooms = updatePackageRooms(packageRooms, index, accommodationCode, regimeCode, availabilities!);

    dispatch(setPackageRooms(updatedPackageRooms));
    dispatch(fetchPriceDetails());
  };

  useEffect(() => {
    if (packageDetails) {
      const params = new URLSearchParams(location.search);

      const outwardFlight = params.get('outwardflight') ?? undefined;
      const returnFlight = params.get('returnflight') ?? undefined;

      if (outwardFlight && returnFlight) {
        const desiredOutwardFlight = packageDetails.outwardFlights.find((x) => x.entryLineGuid == outwardFlight);
        const desiredReturnFlight = packageDetails.returnFlights.find((x) => x.entryLineGuid == returnFlight);

        if (desiredOutwardFlight && desiredReturnFlight) {
          dispatch(
            setPackage({
              ...packageDetails,
              outwardFlights: packageDetails.outwardFlights.map((flight) => {
                return {
                  ...flight,
                  isSelected: flight.entryLineGuid == desiredOutwardFlight.entryLineGuid ? true : false
                } as BookingPackageFlight;
              }),
              returnFlights: packageDetails.returnFlights.map((flight) => {
                return {
                  ...flight,
                  isSelected: flight.entryLineGuid == desiredReturnFlight.entryLineGuid ? true : false
                } as BookingPackageFlight;
              })
            })
          );
        }
      }
    }
    dispatch(fetchPriceDetails());
  }, []);

  return (
    <>
      <form className="form" name="booking--options" id="booking--options" noValidate onSubmit={handleSubmit}>
        <div className="form__wrapper">
          {rooms.map((room) => (
            <TravelerRooms key={room.index} index={room.index} room={room} onRoomChange={handleOnRoomChange} />
          ))}
        </div>
        <div className="booking__navigator">
          {!settings.flightOptions.isHidden && (
            <>
              {settings.skipRouter ? (
                <button type="button" title={translations.STEPS.PREVIOUS} onClick={() => goPrevious()} className="cta cta--secondary">
                  {translations.STEPS.PREVIOUS}
                </button>
              ) : (
                <Link
                  to={`${!settings.skipBasePathInRouting ? settings.basePath : ''}${settings.flightOptions.pathSuffix}?${bookingQueryString}`}
                  title={translations.STEPS.PREVIOUS}
                  className="cta cta--secondary">
                  {translations.STEPS.PREVIOUS}
                </Link>
              )}
            </>
          )}
          <button type="submit" title={translations.STEPS.NEXT} disabled={isLoading} className={buildClassName(['cta', isLoading && 'cta--disabled'])}>
            {translations.STEPS.NEXT}
          </button>
        </div>
      </form>
    </>
  );
};

export default RoomOptionsForm;