import { type PropsWithChildren, useEffect, useState } from "react";

import { Checkbox } from "@/components/ui/checkbox/checkbox";
import { useLocale } from "@/hooks/useLocale";
import { PriceManager } from "@/libs/price-manager/price-manager";
import { cn } from "@/libs/utils";
import type { IOptionalAddOns } from "@/services/eva-display/hotel/hotel-add-to-cart/hotel-add-to-card-services.types";
import type {
  Room,
  RoomCollectionResult,
} from "@/services/eva-display/hotel/hotel-detail/hotel-detail-services.types";

export type AttendeesChecboxValue = Array<Array<string>>;

export interface AttendeesChecboxProps extends PropsWithChildren {
  rooms: {
    room: Room;
    roomCollection: RoomCollectionResult;
  }[];
  addOn: IOptionalAddOns;
  /**
   * @default Array<Array<passengerKey;addOnKey>>
   */
  values?: AttendeesChecboxValue;
  onChange?: (value: AttendeesChecboxValue) => void;
}
// @Note: This separator choosen by BE team
const passengerKeySeperator = ";";

export const generatePassengerValue = (
  passengerKey: string,
  addOnKey: string,
) => `${passengerKey}${passengerKeySeperator}${addOnKey}`;

const AttendeesChecbox = ({
  rooms,
  addOn,
  values,
  onChange,
}: AttendeesChecboxProps) => {
  const { t } = useLocale();
  const [selectedList, setSelectedList] = useState<AttendeesChecboxValue>(
    values || rooms.map(() => []),
  );

  const handleCheckboxRoomChange = (roomIndex: number) => {
    const isAllRoomSelected = (selectedList[roomIndex]?.length || 0) > 0;
    if (isAllRoomSelected) {
      setSelectedList((prev) => {
        const newValues = [...prev];
        newValues[roomIndex] = [];
        onChange?.(newValues);
        return newValues;
      });
    } else {
      setSelectedList((prev) => {
        const newValues = [...prev];
        newValues[roomIndex] =
          rooms[roomIndex]?.room.passengerKeys.map((item) =>
            generatePassengerValue(item, addOn.key),
          ) || [];
        onChange?.(newValues);
        return newValues;
      });
    }
  };

  const handleChangeCheckboxPassenger = (
    roomIndex: number,
    passengerValue: string,
  ) => {
    setSelectedList((prev) => {
      const newValues = [...prev];
      const passengerIndex =
        newValues[roomIndex]?.indexOf(passengerValue) ?? -1;

      if (passengerIndex > -1) {
        newValues[roomIndex]?.splice(passengerIndex, 1);
      } else {
        newValues[roomIndex]?.push(passengerValue);
      }

      onChange?.(newValues);
      return newValues;
    });
  };
  useEffect(() => {
    if (values) setSelectedList(values);
  }, [values]);

  return rooms.map(({ room }, roomIndex) => {
    const isLeastOneRoomSelected = (selectedList[roomIndex]?.length || 0) > 0;
    const isMultipleRoom = rooms.length > 1;
    return (
      <>
        {roomIndex === 0 && (
          <div className="pt-3 text-gray-800">{t("Participants")}</div>
        )}
        <div
          className={cn(
            isMultipleRoom && "my-2 rounded-primary border border-gray-200 p-4",
          )}
          key={+roomIndex}
        >
          {isMultipleRoom && (
            <div className="mb-2 flex items-center justify-between border-b border-gray-200 pb-4 !text-sm">
              <Checkbox
                variant="primary"
                id={`${roomIndex}_room`}
                label={`${roomIndex + 1}${t(". Room")}`}
                labelClassname="text-gray-800 !text-sm font-semibold"
                checked={isLeastOneRoomSelected}
                onCheckedChange={() => handleCheckboxRoomChange(roomIndex)}
              />
              <div className="font-medium text-gray-800">
                {PriceManager({
                  currency: addOn.totalExchangePrice.slice(0, 3),
                  value:
                    +addOn.totalExchangePrice.slice(3) *
                    room.passengerKeys.length,
                })}
              </div>
            </div>
          )}
          <div className={cn(isMultipleRoom && "pl-3")}>
            {room.passengerKeys.map((passengerKey, passengerIndex) => {
              const passengerValue = generatePassengerValue(
                passengerKey,
                addOn.key,
              );
              const isRoomSelected =
                selectedList[roomIndex]?.includes(passengerValue);
              return (
                <div
                  key={passengerKey}
                  className={cn(
                    "flex items-center  justify-between py-2 !text-sm",
                    !isMultipleRoom && "border-b border-gray-200 last:border-0",
                  )}
                >
                  <Checkbox
                    variant="primary"
                    id={passengerValue}
                    label={
                      addOn.passengers.find((item) => item.key === passengerKey)
                        ?.description || `${passengerIndex + 1}. ${t("Adult")}`
                    }
                    checked={isRoomSelected}
                    onCheckedChange={() =>
                      handleChangeCheckboxPassenger(roomIndex, passengerValue)
                    }
                    labelClassname="!text-sm text-gray-800"
                  />
                  <div className="font-medium text-gray-800">
                    {PriceManager({
                      currency: addOn.totalExchangePrice.slice(0, 3),
                      value: +addOn.totalExchangePrice.slice(3),
                    })}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </>
    );
  });
};

export { AttendeesChecbox };