/* eslint-disable react/no-danger */
import { useState } from "react";

import { Button } from "@/components/ui/button/button";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { Modal } from "@/components/ui/modal/modal";
import { useModal } from "@/components/ui/modal/modal.hook";
import type { AttendeesChecboxValue } from "@/components/widget/attendees-checkbox/attendees-checkbox";
import { AttendeesChecbox } from "@/components/widget/attendees-checkbox/attendees-checkbox";
import { CoreSummaryAdditionalServiceItem } from "@/features/core/summary/components/core-summary-additional-service";
import { useApp } from "@/hooks/useApp";
import { useLocale } from "@/hooks/useLocale";
import localStateCache from "@/libs/helpers/local-state-cache-helper";
import { PriceManager } from "@/libs/price-manager/price-manager";
import type { IOptionalAddOns } from "@/services/eva-display/hotel/hotel-add-to-cart/hotel-add-to-card-services.types";

import {
  useSummaryCtxActions,
  useSummaryCtxState,
} from "../context/summary-context";
import { useHotelSummary } from "../hooks/use-hotel-summary";

const HotelSummaryEventAddon = ({ addOn }: { addOn: IOptionalAddOns }) => {
  const { isB2C } = useApp();
  const { t } = useLocale();
  const { data: summaryData } = useHotelSummary();
  const summaryState = useSummaryCtxState();
  const { setOptionalAddOns } = useSummaryCtxActions();
  const hasSelectedAddons = summaryState.optionalAddOns?.some(
    (item) => item.addOn.key === addOn.key,
  );
  const [showAttendees, setShowAttendees] = useState(
    hasSelectedAddons || false,
  );
  const { modalOpen, openModal, closeModal } = useModal({ open: false });

  const handleChangeAttendeesChecbox = (values: AttendeesChecboxValue) => {
    const hasSelectedValues = values.some((item) => item.length > 0);

    if (!hasSelectedValues) {
      const newOptionalAddOns =
        summaryState.optionalAddOns?.filter(
          (item) => item.addOn.key !== addOn.key,
        ) || [];
      localStateCache.set("addons", {
        data: newOptionalAddOns || [],
        productKey: summaryData.payload.searchItemKey!,
      });
      setOptionalAddOns({
        optionalAddOns: newOptionalAddOns,
        totalPrice: summaryState.totalPrice,
        tryTotalPrice: summaryState.tryTotalPrice,
      });
      return;
    }

    const newOptionalAddOns = [
      ...(summaryState.optionalAddOns || []).filter(
        (item) => item.addOn.key !== addOn.key,
      ),
      {
        addOn,
        selectedPassengerValues: [...values],
      },
    ];
    localStateCache.set("addons", {
      data: newOptionalAddOns || [],
      productKey: summaryData.payload.searchItemKey!,
    });
    setOptionalAddOns({
      optionalAddOns: newOptionalAddOns,
      totalPrice: summaryState.totalPrice,
      tryTotalPrice: summaryState.tryTotalPrice,
    });
  };

  const handleClickOpenAttendees = () => {
    setShowAttendees(true);
  };

  const handleClickCloseAttendees = () => {
    setShowAttendees(false);
    setOptionalAddOns({
      optionalAddOns:
        summaryState.optionalAddOns?.filter(
          (item) => item.addOn.key !== addOn.key,
        ) || [],
      totalPrice: summaryState.totalPrice,
      tryTotalPrice: summaryState.tryTotalPrice,
    });
  };

  return (
    <>
      <CoreSummaryAdditionalServiceItem
        icon="Ticket"
        key={addOn.key}
        priceInfo={t("Per person")}
        price={PriceManager({
          currency: addOn.totalExchangePrice.slice(0, 3),
          value: +addOn.totalExchangePrice.slice(3),
        })}
        onClickMoreInfo={openModal}
        title={addOn.name}
        description={addOn.formattedDate}
        active={summaryState.optionalAddOns?.some(
          (item) => item.addOn.key === addOn.key,
        )}
        showIcon={isB2C}
        buttonContent={
          showAttendees ? (
            <Button
              type="button"
              variant="outline-primary"
              onClick={handleClickCloseAttendees}
            >
              <LIcon name="X" className="mr-1 w-[20px]" /> {t("Remove")}
            </Button>
          ) : (
            <Button
              type="button"
              variant="outline-primary"
              onClick={handleClickOpenAttendees}
            >
              <LIcon name="Plus" className="mr-1 w-[20px]" /> {t("Add")}
            </Button>
          )
        }
      >
        {showAttendees && (
          <div className="col-span-12">
            <AttendeesChecbox
              rooms={summaryData.payload.rooms}
              addOn={addOn}
              values={
                summaryState.optionalAddOns?.find(
                  (item) => item.addOn.key === addOn.key,
                )?.selectedPassengerValues ||
                summaryData.payload.rooms.map(() => [])
              }
              onChange={(values) => handleChangeAttendeesChecbox(values)}
            />
          </div>
        )}
      </CoreSummaryAdditionalServiceItem>
      <Modal
        open={modalOpen}
        title={addOn.name}
        closable={false}
        size="lg"
        footer={
          <div className="mt-4 flex justify-end">
            <Button variant="primary" onClick={closeModal}>
              {t("Close")}
            </Button>
          </div>
        }
      >
        <div dangerouslySetInnerHTML={{ __html: addOn.description }} />
      </Modal>
    </>
  );
};

export default HotelSummaryEventAddon;