import dayjs from "dayjs";
import React from "react";

import ContactModal from "@/components/shared/contact-modal/contact-modal";
import { Button } from "@/components/ui/button/button";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { useApp } from "@/hooks/useApp";
import { useLocale } from "@/hooks/useLocale";
import { localeStorageHelper } from "@/libs/helpers/locale-storage-helper";
import { storageManager } from "@/libs/storage-manager";
import { useServerDataCtx } from "@/providers/server-data-provider/server-data-provider";

import RoomTravelPlanner from "../room-travel-planner/room-travel-planner";

const RoomInfoError = ({
  hideTravelPlanner,
}: {
  hideTravelPlanner: boolean;
}) => {
  const { isOtel } = useApp();
  const { t } = useLocale();
  const { clientConfig } = useServerDataCtx();

  let startDate = null;
  let endDate = null;
  const localStorageValue = localeStorageHelper.get("travel-planner");
  if (localStorageValue === null) {
    const tpData = storageManager.get("core-travel-planner").payload;
    startDate = tpData.dates.checkIn as string | null;
    endDate = tpData.dates.checkOut as string | null;
  } else {
    startDate = localStorageValue["date-range"].from;
    endDate = localStorageValue["date-range"].to;
  }

  const tpData = storageManager.get("core-travel-planner").payload;
  const choosedHotel = tpData ? tpData?.payload?.destinationId : null;
  const selectedBaseHotel =
    clientConfig?.domainProducts.find((item) => item.id === +choosedHotel) ||
    clientConfig?.domainProducts.find(
      (item) => item.name === clientConfig?.clientScope,
    ) ||
    clientConfig?.domainProducts[0];

  const handleClickSelectDate = () => {
    window.location.href = "/";
  };
  return (
    <div className="scroll-mt-48" id="rooms">
      {!hideTravelPlanner && <RoomTravelPlanner />}
      <div className="flex h-[500px] flex-col items-center justify-center gap-1">
        <LIcon name="Search" size={30} className="mb-4" />
        <span className="text-center text-gray-500">
          {`${dayjs(startDate).format("DD MMMM YYYY dddd")} - ${dayjs(
            endDate,
          ).format("DD MMMM YYYY dddd")}`}
        </span>
        <span className="font-semibold text-gray-800">
          {t(
            "Sorry, all rooms are sold out for the dates you are looking for!",
          )}{" "}
        </span>
        {isOtel && (
          <>
            <Button
              className="my-4"
              variant="primary"
              onClick={handleClickSelectDate}
            >
              {t("See Available Dates")}
            </Button>
            <span className="text-sm font-medium text-gray-400">{t("or")}</span>
            <div className="my-4 flex items-center justify-center gap-4">
              <ContactModal>
                <Button variant="primary-text">
                  {t("Get live support")}&nbsp;
                  <LIcon name="Calendar" size={18} />
                </Button>
              </ContactModal>
              <ContactModal>
                <Button variant="primary-text">{t("we'll call you")}</Button>
              </ContactModal>
            </div>
            <div className="text-center text-xs text-gray-500">
              {t(
                "For detailed information and reservation, you can call the Customer Service at {{tel_no}}.",
                {
                  tel_no: selectedBaseHotel?.phone,
                },
              )}
              <br />
              {t(
                "Our customer service is available between Mon-Sat 09:00-23:00, Sun 10:00-23:00 hours.",
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default RoomInfoError;