import React, { useState } from "react";

import { Button } from "@/components/ui/button/button";
import Card from "@/components/ui/card/card";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import ModalableItem from "@/components/widget/modalable-item/modalable-item";
import {
  RezervationSummaryDivider,
  RezervationSummaryTitle,
} from "@/components/widget/rezervation-summary/rezervation-summary";
import { useApp } from "@/hooks/useApp";
import { useLocale } from "@/hooks/useLocale";
import type { RoomGroupResult } from "@/services/eva-display/hotel/hotel-detail/hotel-detail-services.types";
import type { HotelListItemCampaignInformation } from "@/services/eva-display/hotel/hotel-search/hotel-search-services.types";

import useRoomSelect from "../../hooks/use-room-select";

export const GetCampaigns = (roomGroupResult: RoomGroupResult[]) =>
  roomGroupResult
    ?.filter((items) => items.campaignInformations)
    .map((item) => item.campaignInformations)
    .flatMap((campaign) => campaign)
    .reduce((prev, val: HotelListItemCampaignInformation) => {
      if (!prev.find((item) => item.key === val.key)) {
        prev.push(val);
      }
      return prev;
    }, [] as HotelListItemCampaignInformation[]);

const ReservationSummaryCampaigns = () => {
  const [isShowMore, setIsShowMore] = useState(false);
  const { isOtel } = useApp();
  const { state } = useRoomSelect();
  const { t } = useLocale();
  const campaigns = state.roomGroupResult
    ? GetCampaigns(state.roomGroupResult)
    : [];

  return (
    isOtel &&
    campaigns &&
    campaigns.length > 0 && (
      <Card className="w-full !pb-1">
        <RezervationSummaryTitle title={t("Campaigns")} />
        <RezervationSummaryDivider />
        <div className="my-2">
          {campaigns.slice(0, isShowMore ? campaigns.length : 2).map((item) => (
            <ModalableItem
              key={item.key}
              title={item.description}
              modalContent={item.tooltip}
            />
          ))}
        </div>

        <div className="text-center">
          {campaigns.length > 2 && (
            <Button
              className="gap-1"
              variant="primary-text"
              onClick={() => setIsShowMore(!isShowMore)}
            >
              <span>
                {isShowMore ? t("Hide Campaigns") : t("All campaigns")}
              </span>
              {!isShowMore && `(${campaigns.length - 2})`}
              <LIcon
                name={isShowMore ? "ChevronUp" : "ChevronDown"}
                size={16}
              />
            </Button>
          )}
        </div>
      </Card>
    )
  );
};

export default ReservationSummaryCampaigns;