import JsonURL from "@jsonurl/jsonurl";
import { BookingPackageDetailsRequest, BookingPackagePax, BookingPackageRequest, BookingPackageRequestRoom } from "@qite/tide-client/build/types";
import { addDays, addMonths, format, formatISO } from "date-fns";
import { omit } from "lodash";
import React, { useContext, useEffect, useState } from "react";
import { ApiSettingsState } from "../../shared/types";
import { getTranslations } from "../../shared/utils/localization-util";
import { getDateAsDateFromParams, getRoomsFromParams } from "../../shared/utils/query-string-util";
import SettingsContext from "../settings-context";
import { DateRange, ProductRoom } from "../types";
import packageApi from "../utils/api";
import { formatPriceByMode } from "../utils/price";
import Dates from "./dates";
import Footer from "./footer";
import Header from "./header";
import Rooms from "./rooms";

interface ProductProps {
  productCode: string;
  productName: string;
  duration?: number;
  rating?: number;
}

const Product: React.FC<ProductProps> = ({
  productCode,
  productName,
  duration,
  rating
}) => {
  const {
    apiKey,
    apiUrl,
    officeId,
    agentId,
    catalogueId,
    includeFlights,
    language,
    basePath,
    priceMode,
    addProductToQuery,
    isOffer
  } = useContext(SettingsContext);
  const translations = getTranslations(language);

  const [loaded, setLoaded] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [roomsIsDisabled, setRoomsIsDisabled] = useState<boolean>(true);
  const [price, setPrice] = useState<number>();
  const [hasFlight, setHasFlight] = useState<boolean>(false);
  const [hasTransfer, setHasTransfer] = useState<boolean>(false);
  const [rooms, setRooms] = useState<ProductRoom[]>([{ adults: 2, children: 0, childAges: [] }]);
  const [dateRange, setDateRange] = useState<DateRange>();
  const [packageProductName, setPackageProductName] = useState<string>(productName);

  const fetchPackage = async (signal: AbortSignal) => {
    if (
      loaded &&
      productCode &&
      dateRange?.fromDate &&
      dateRange?.toDate &&
      rooms
    ) {

      const apiSettingsState = (apiKey && apiUrl) ? {
        apiKey: apiKey,
        apiUrl: apiUrl
      } as ApiSettingsState : undefined;

      const startDate = formatISO(dateRange?.fromDate, { representation: "date" }) + "T00:00:00Z";
      const endDate = formatISO(dateRange?.toDate, { representation: "date" }) + "T00:00:00Z";

      const requestRooms = rooms.map((room, i) => {
        const requestRoom = {
          index: i,
          pax: []
        } as BookingPackageRequestRoom;

        for (var a = 0; a < room.adults; a++) {
          requestRoom.pax.push({
            age: 30,
          } as BookingPackagePax);
        }

        for (var c = 0; c < room.children; c++) {
          requestRoom.pax.push({
            age: room.childAges[c],
          } as BookingPackagePax);
        }

        return requestRoom;
      });

      const request = {
        officeId: officeId,
        agentId: agentId,
        payload: {
          searchType: 0,
          catalogueId: catalogueId,
          productCode: productCode,
          fromDate: startDate,
          toDate: endDate,
          includeFlights: includeFlights,
          rooms: requestRooms,
        } as BookingPackageDetailsRequest,
      } as BookingPackageRequest<BookingPackageDetailsRequest>;

      setIsLoading(true);
      const response = await packageApi.fetchDetails(request, signal, language, apiSettingsState);
      if (!response.errorCode && response.payload) {
        const selectedOption = response.payload.options.find(x => x.isSelected);
        if (selectedOption) {
          const hasFlight = selectedOption.includedServiceTypes.some(x => x === 7);
          const hasTranfer = selectedOption.includedServiceTypes.some(x => x === 13);

          setPrice(selectedOption.price);
          setHasFlight(hasFlight);
          setHasTransfer(hasTranfer);

          if (!productName) {
            setPackageProductName(selectedOption.name);
          }
        }
      } else {
        setPrice(undefined);
        setHasFlight(false);
        setHasTransfer(false);
      }

      setIsLoading(false);
    }
  }

  const handleBookClick = () => {
    const params: Record<string, string> = {};

    if (rooms) {
      const serialized = JsonURL.stringify(
        rooms.map((room) => omit(room, ["children"])),
        { AQF: true }
      );

      if (serialized) {
        params["rooms"] = serialized;
      }
    }

    if (dateRange?.fromDate) {
      params["startDate"] = format(dateRange.fromDate, "yyyy-MM-dd");
    }

    if (dateRange?.toDate) {
      params["endDate"] = format(dateRange.toDate, "yyyy-MM-dd");
    }

    params["catalog"] = catalogueId.toString();

    if (addProductToQuery) {
      params["productCode"] = productCode;
      params["productName"] = encodeURI(packageProductName)!;
    }

    const path = window.location.pathname;
    const paramString = Object.keys(params)
      .map((key) => `${key}=${params[key]}`)
      .join("&");

    window.location.href = basePath.startsWith('/')
      ? `${window.location.protocol}//${window.location.host}${basePath}?${paramString}`
      : `${path}${path.endsWith("/") ? "" : "/"}${basePath}?${paramString}`
  }

  const handleRoomChange = (rooms: ProductRoom[]) => {
    setRooms(rooms);
  }

  const handleDateChange = (value: DateRange) => {
    setDateRange(value);
  }

  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;

    (async () => {
      fetchPackage(signal);
    })();
    return () => {
      controller.abort();
    };
  }, [
    dateRange?.fromDate?.valueOf(),
    dateRange?.toDate?.valueOf(),
    JSON.stringify(rooms)
  ]);

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const rooms = getRoomsFromParams(params, "rooms");
    const from = getDateAsDateFromParams(params, "from");
    const to = getDateAsDateFromParams(params, "to");

    if (rooms) {
      setRooms(rooms);
    }

    if (from && duration) {
      const durationTo = new Date(
        Date.UTC(from.getFullYear(), from.getMonth(), from.getDate() + duration)
      );

      setDateRange({ fromDate: from, toDate: durationTo });
    } else if (from && to) {
      setDateRange({ fromDate: from, toDate: to });
    } else if (duration) {
      const now = new Date();

      const durationFrom = new Date(Date.UTC(now.getFullYear(), now.getMonth() + 3, now.getDate()));
      const durationTo = new Date(
        Date.UTC(
          durationFrom.getFullYear(),
          durationFrom.getMonth(),
          durationFrom.getDate() + duration
        )
      );

      setDateRange({ fromDate: durationFrom, toDate: durationTo });
    } else {
      const now = new Date();
      const startDate = addMonths(now, 1);
      const endDate = addDays(startDate, 7);

      setDateRange({ fromDate: startDate, toDate: endDate });
    }

    setLoaded(true);
  }, [location]);

  const personCount = rooms.reduce((s, r) => s + r.adults + r.children, 0);
  const durationCount = 0;
  const priceText = formatPriceByMode(
    price,
    priceMode,
    personCount,
    durationCount,
    translations.PRODUCT.PER_PERSON,
    translations.PRODUCT.PER_NIGHT,
    translations.PRODUCT.PER_PERSON_PER_NIGHT
  );

  return (
    <div className="booking-product">
      <Header
        name={packageProductName}
        rating={rating}
        priceText={priceText}
        isLoading={isLoading}
        hasFlight={hasFlight}
        hasTransfer={hasTransfer} />
      <div className="booking-product__body">
        <Rooms
          rooms={rooms}
          isDisabled={roomsIsDisabled}
          setIsDisabled={setRoomsIsDisabled}
          onChange={handleRoomChange} />
        <Dates
          value={dateRange}
          duration={duration}
          onChange={handleDateChange} />
      </div>
      <Footer
        priceText={priceText}
        isLoading={isLoading}
        isOffer={isOffer}
        roomsIsDisabled={roomsIsDisabled}
        handleBookClick={handleBookClick} />
    </div>
  );
}

export default Product;