import { t } from "i18next";
import { useEffect } from "react";

import { useApp } from "@/hooks/useApp";
import type {
  Room as RoomInfoType,
  RoomCollectionResult,
  RoomGroupResult,
} from "@/services/eva-display/hotel/hotel-detail/hotel-detail-services.types";
import type { IHotelSearchResultSerializer } from "@/services/eva-display/hotel/hotel-search/hotel-search-services.serializer";

import { usePayment } from "../modules/hotel/payment/hooks/use-hotel-payment";
import MultipleRoomInfo from "./components/multiple-room-info/multiple-room-info";
import RezervationSummary from "./components/reservation-summary/reservation-summary";
import RoomInfo from "./components/room-info/room-info";
import RoomInfoError from "./components/room-info-error/room-info-error";
import RoomTravelPlanner from "./components/room-travel-planner/room-travel-planner";
import { RoomsCtxProvider } from "./context/RoomContext";

export interface RoomProps {
  data: RoomCollectionResult[];
  roomGroupResult: RoomGroupResult[];
  searchData?: IHotelSearchResultSerializer;
  searchId: string;
  hideTravelPlanner?: boolean;
  primaryButtonOnClick?(selectedRoom: any): void;
  passengerKeys?: {
    type: number;
    key: string;
    age: number;
  }[];
}

const RoomContent = (props: {
  data: RoomCollectionResult[];
  roomCount: number;
  searchData?: IHotelSearchResultSerializer;
  primaryButtonOnClick?(selectedRoom: any): void;
  hideTravelPlanner?: boolean;
}) => {
  const { isOtel } = useApp();

  return (
    <>
      {!props.hideTravelPlanner && <RoomTravelPlanner />}
      <div className="flex flex-col items-center justify-center gap-4 md:mt-10">
        {props.roomCount > 1 ? (
          <MultipleRoomInfo
            data={props.data}
            primaryButtonOnClick={props.primaryButtonOnClick}
          />
        ) : (
          <div className="flex gap-4">
            <div className="flex flex-col gap-4">
              {props.data.map((item, index) => (
                <RoomInfo
                  key={+index}
                  roomInfo={item}
                  defaultFirstSelectRoom={index === 0 && isOtel}
                />
              ))}
            </div>
            <div>
              <div className="sticky top-[165px]">
                <RezervationSummary
                  searchData={props.searchData}
                  data={props.data}
                  primaryButtonOnClick={props.primaryButtonOnClick}
                />
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
};

const Room = ({
  searchId,
  searchData,
  data,
  hideTravelPlanner = false,
  roomGroupResult,
  passengerKeys,
  primaryButtonOnClick,
}: RoomProps) => {
  const { isOtel, isB2E } = useApp();
  function getRoomsInfo() {
    const temp: RoomInfoType[] = [];
    data?.forEach((item) => {
      item.rooms.forEach((room) => {
        if (!isB2E || !room.onDemand) {
          temp.push(room);
        }
      });
    });
    return temp;
  }
  const roomsInfo = getRoomsInfo();

  const { setPaymentState } = usePayment();

  useEffect(() => {
    setPaymentState("idle");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (roomsInfo.length === 0 || !data) {
    return <RoomInfoError hideTravelPlanner={hideTravelPlanner} />;
  }

  const findRoomCount = (dataFilter: RoomCollectionResult[]) => {
    let maxRoomIndex = 0;
    dataFilter.forEach((item) => {
      item?.rooms.forEach((room: any) => {
        if (room.roomIndex > maxRoomIndex) {
          maxRoomIndex = room.roomIndex;
        }
      });
    });

    return maxRoomIndex;
  };

  const roomCount = findRoomCount(data);
  const documentNumber = searchData?.documentNumber;
  return (
    <div id="rooms" className="scroll-mt-16 md:scroll-mt-44">
      <RoomsCtxProvider
        selectedRooms={new Array(roomCount).fill({})}
        activeTab={1}
        roomCount={roomCount}
        searchId={searchId}
        roomGroupResult={roomGroupResult}
        passengerKeys={passengerKeys}
      >
        <RoomContent
          data={data}
          roomCount={roomCount}
          searchData={searchData}
          primaryButtonOnClick={primaryButtonOnClick}
          hideTravelPlanner={hideTravelPlanner}
        />
        {documentNumber && isOtel && (
          <div className="mb-8 mt-10 text-center">
            <span className="text-sm text-gray-500">
              {t("Ministry of Culture and Tourism/Tourism") +
                t("Operation Certificate")}
              :{documentNumber}
            </span>
          </div>
        )}
      </RoomsCtxProvider>
    </div>
  );
};

export default Room;