/* eslint-disable no-console */
/* eslint-disable jsx-a11y/label-has-associated-control */

"use client";

/* eslint-disable @next/next/no-img-element */
import { usePathname, useRouter } from "next/navigation";
import { flushSync } from "react-dom";
import { useMediaQuery } from "usehooks-ts";

import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { useModal } from "@/components/ui/modal/modal.hook";
import TriggerButton from "@/components/ui/trigger-button/trigger-button";
import { useAuth } from "@/features/auth/hooks/use-auth";
import GlobalizationFormModal from "@/features/globalization-form/globalization-form-modal";
import ProductBar from "@/features/product-bar/product-bar";
import { useApp } from "@/hooks/useApp";
import type { LocalizationData } from "@/hooks/useLanguageData";
import useLanguageData from "@/hooks/useLanguageData";
import { useLocale } from "@/hooks/useLocale";
import { localeStorageHelper } from "@/libs/helpers/locale-storage-helper";
import { getProductPathFromPath } from "@/libs/helpers/path-helper";
import { sessionStorageHelper } from "@/libs/helpers/session-storage-helper";
import { useServerDataCtx } from "@/providers/server-data-provider/server-data-provider";
import { useLocalizationStore } from "@/store/localization-store/use-localization-store";
import { useTravelPlannerStore } from "@/store/travel-planner-store/use-travel-planner-store";

import Container from "../container";
import styles from "./header.module.css";
import HeaderUserMenu from "./header-user-menu/header-user-menu";

const Header = () => {
  const { t } = useLocale();
  const { lngData, currencyData } = useLanguageData();
  const { isB2C, isB2E, isOtel } = useApp();
  const { clientConfig } = useServerDataCtx();
  const { isAuthenticated } = useAuth();
  const isDesktop = useMediaQuery("(min-width: 768px)");
  const { setData } = useTravelPlannerStore();
  const { openModal, closeModal, modalOpen } = useModal({
    open: false,
  });

  const { localizationState } = useLocalizationStore();

  const router = useRouter();
  const pathName = usePathname();

  const logoPath = clientConfig?.logoUrl;

  const handleClickLogoLink = () => {
    flushSync(() => {
      localeStorageHelper.delete("travel-planner");
      sessionStorageHelper.delete("core-travel-planner");
      setData(undefined);
    });

    const productPath = getProductPathFromPath(window.location.pathname);
    window.location.href = `/${productPath}`;
  };

  return (
    <>
      <div className={styles.wrap}>
        <Container className="h-full px-0 md:px-8">
          <div className={styles.container}>
            <button type="button" onClick={handleClickLogoLink}>
              <div className="cursor-pointer">
                <img src={logoPath} className={styles.image} alt="logo" />
              </div>
            </button>
            {(isB2C || isOtel) &&
              !pathName.includes("summary") &&
              !pathName.includes("success") && (
                <div className="flex-end">
                  <TriggerButton
                    className="border-0 !p-0 !text-sm shadow-none"
                    leftIcon={<LIcon size={24} name="Globe" />}
                    size="md"
                    fullWidth
                    label={`${t(
                      lngData.find(
                        (item: LocalizationData) =>
                          item.value === localizationState.data.language,
                      )?.name ?? "Turkish",
                    )},${
                      currencyData.find(
                        (item: LocalizationData) =>
                          item.value === localizationState.data.currency,
                      )?.value
                    }`}
                    onClick={openModal}
                  />
                </div>
              )}
            {isB2E && (
              <div className={styles.buttonGroup}>
                <div className={styles.triggerButtons}>
                  {/* <div className="flex">
                   <TriggerButton
                  className="border-0 shadow-none"
                  leftIcon={<LIcon size={24} name="Globe" />}
                  size="md"
                  label="Türkçe, TL"
                />

                <TriggerButton
                  className="border-0 shadow-none"
                  leftIcon={<LIcon size={24} name="HelpCircle" />}
                  size="md"
                  label="Yardım"
                />
              </div> */}

                  {isAuthenticated && isB2E && (
                    <TriggerButton
                      leftIcon={<LIcon size={24} name="Inbox" />}
                      size="md"
                      label={isDesktop ? "Taleplerim" : ""}
                      onClick={() => router.push("/booking-request")}
                      isFocus={pathName === "/booking-request"}
                    />
                  )}
                </div>
                {isAuthenticated && isB2E && <HeaderUserMenu />}
              </div>
            )}
          </div>
        </Container>
      </div>
      {!isOtel && <ProductBar />}
      <GlobalizationFormModal closeModal={closeModal} modalOpen={modalOpen} />
    </>
  );
};

export default Header;