import React, { useEffect } from "react";

import Card from "@/components/ui/card/card";
import { Carousel } from "@/components/ui/carousel/carousel";
import ModalableItem from "@/components/widget/modalable-item/modalable-item";
import { RezervationSummaryTitle } from "@/components/widget/rezervation-summary/rezervation-summary";
import HotelSummarySkeleton from "@/features/hotel/components/hotel-summary/components/hotel-summary-skeleton";
import Room from "@/features/room";
import { GetCampaigns } from "@/features/room/components/reservation-summary/reservation-summary-campaigns";
import RoomInfoError from "@/features/room/components/room-info-error/room-info-error";
import { useBreakpoints } from "@/hooks/useBreakpoints";
import { useLocale } from "@/hooks/useLocale";
import { useHotelRoomSearchQuery } from "@/services/eva-display/hotel/hotel-room-search/hotel-room-search.services";
import type { IHotelRoomSearchRequest } from "@/services/eva-display/hotel/hotel-room-search/hotel-room-search-services.types";
import type { IHotelSearchResultSerializer } from "@/services/eva-display/hotel/hotel-search/hotel-search-services.serializer";
import { useLoaderStore } from "@/store/loader-store/use-loader-store";

interface HotelWidgetContentProps {
  parameters: IHotelRoomSearchRequest;
}

const HotelWidgetContent = (props: HotelWidgetContentProps) => {
  const hotelWidgetSearchQuery = useHotelRoomSearchQuery(props.parameters);
  const { t } = useLocale();
  const { clearLoader } = useLoaderStore();
  const { isDesktop } = useBreakpoints();

  useEffect(() => {
    if (!hotelWidgetSearchQuery.isFetching) {
      clearLoader();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [hotelWidgetSearchQuery.isFetching]);

  const campaigns = hotelWidgetSearchQuery?.data?.roomGroupResult
    ? GetCampaigns(hotelWidgetSearchQuery.data.roomGroupResult)
    : [];

  return (
    <div className="flex justify-center">
      <div className="w-full max-w-[1080px] p-4">
        {hotelWidgetSearchQuery.isLoading && <HotelSummarySkeleton />}
        {hotelWidgetSearchQuery.isError && <RoomInfoError hideTravelPlanner />}
        {hotelWidgetSearchQuery.isSuccess && (
          <>
            {hotelWidgetSearchQuery.data.roomCollectionResult?.length > 0 &&
              !isDesktop &&
              campaigns &&
              campaigns.length > 0 && (
                <div>
                  <RezervationSummaryTitle title={t("Campaigns")} />
                  <Card className="my-3 !p-0 shadow-none">
                    <Carousel navigation={false} pagination={false}>
                      {campaigns.map((item) => (
                        <div className="px-4 py-2" key={item.key}>
                          <ModalableItem
                            title={item.description}
                            modalContent={item.tooltip}
                          />
                        </div>
                      ))}
                    </Carousel>
                  </Card>
                </div>
              )}
            {hotelWidgetSearchQuery.data.roomCollectionResult?.length > 0 && (
              <div className="my-4 text-center md:text-left">
                <h1 className="m-0 p-0 text-xl font-semibold text-gray-800">
                  {t("Room Options")}
                </h1>
                <p className="m-0 p-0 text-sm text-gray-500">
                  {t("{{roomCount}} room types available", {
                    roomCount:
                      hotelWidgetSearchQuery.data.roomCollectionResult
                        ?.length || 0,
                  })}
                </p>
              </div>
            )}
            <Room
              hideTravelPlanner
              data={hotelWidgetSearchQuery.data.roomCollectionResult}
              roomGroupResult={hotelWidgetSearchQuery.data.roomGroupResult}
              searchId={hotelWidgetSearchQuery.data.searchId}
              passengerKeys={hotelWidgetSearchQuery.data.passengerList}
              searchData={
                hotelWidgetSearchQuery.data as unknown as IHotelSearchResultSerializer
              }
            />
          </>
        )}
      </div>
    </div>
  );
};

export default HotelWidgetContent;