import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect } from "react";

import { AddonProductTypeEnum } from "@/@types/enums/addon-product-type.enum";
import Container from "@/components/shared/container";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { useLocale } from "@/hooks/useLocale";
import { useServerDataCtx } from "@/providers/server-data-provider/server-data-provider";

export const ProductRoutes = [
  "/",
  "/flight",
  "/hotel",
  "/rentcar",
  "/tour",
  "/transfer",
];
type ProductFeatureTypes =
  | "flight"
  | "hotel"
  | "tour"
  | "rentacar"
  | "transfer";

export const ProductFeatures: Record<ProductFeatureTypes, AppLinkArgs> = {
  flight: {
    feature: "flight",
    icon: "Plane",
    label: "Flight",
    path: "/flight",
  },
  hotel: {
    feature: "hotel",
    icon: "Home",
    label: "Hotel",
    path: "/hotel",
  },
  tour: {
    feature: "tour",
    icon: "Briefcase",
    label: "Tour",
    path: "/tour",
  },
  rentacar: {
    feature: "rentacar",
    icon: "CarFront",
    label: "Rentcar",
    path: "/rentcar",
  },
  transfer: {
    feature: "transfer",
    icon: "BusFront",
    label: "Transfer",
    path: "/transfer",
  },
};

interface AppLinkArgs {
  feature: ProductFeatureTypes;
  icon: string;
  label: string;
  path: string;
}
interface AppLinkFunc {
  (feature: string, icon: any, label: string, path: string): JSX.Element | null;
}

const useProductBarLinks = () => {
  const { t } = useLocale();
  const { addonList } = useServerDataCtx();
  const pathName = usePathname();
  const appLinks = [] as Array<
    Partial<Record<ProductFeatureTypes, JSX.Element>>
  >;

  function hasAddonInApp(addonProductTypeCode: AddonProductTypeEnum) {
    if (addonList) {
      return !!addonList.some((x) =>
        x?.Addon?.ProductTypes?.some((y) => y.Code === addonProductTypeCode),
      );
    }

    return false;
  }

  const appLink: AppLinkFunc = (feature, icon, label, path) => {
    switch (feature) {
      case "hotel":
        if (!hasAddonInApp(AddonProductTypeEnum.Hotel)) return null;
        break;
      case "tour":
        if (!hasAddonInApp(AddonProductTypeEnum.Tour)) return null;
        break;
      case "flight":
        if (!hasAddonInApp(AddonProductTypeEnum.Flight)) return null;
        break;
      case "rentacar":
        if (!hasAddonInApp(AddonProductTypeEnum.CarRental)) return null;
        break;
      case "transfer":
        if (!hasAddonInApp(AddonProductTypeEnum.Transfer)) return null;
        break;
      default:
        return null;
    }

    const isActive =
      pathName.includes(path) || (feature === "flight" && pathName === "/");

    return (
      <Link href={path} key={path}>
        <div
          data-active={isActive}
          className={`flex min-h-[50px] items-center justify-center gap-2 px-4 ${
            isActive
              ? "border-b-2 border-primary-500 font-semibold text-primary-500"
              : ""
          }`}
        >
          <LIcon name={icon} />
          <span className="whitespace-nowrap">{label}</span>
        </div>
      </Link>
    );
  };

  Object.values(ProductFeatures).forEach((value) => {
    const link = appLink(value.feature, value.icon, t(value.label), value.path);
    if (link)
      appLinks.push({
        [value.feature]: link,
      });
  });

  const getIsEmpty = () => {
    return (
      [
        hasAddonInApp(AddonProductTypeEnum.Hotel),
        hasAddonInApp(AddonProductTypeEnum.Tour),
        hasAddonInApp(AddonProductTypeEnum.Flight),
        hasAddonInApp(AddonProductTypeEnum.CarRental),
        hasAddonInApp(AddonProductTypeEnum.Transfer),
      ].filter((x) => x).length <= 1
    );
  };

  return {
    isEmpty: getIsEmpty(),
    pathName,
    addonList,
    appLinks,
  };
};

const ProductBar = () => {
  const { pathName, isEmpty, appLinks } = useProductBarLinks();

  useEffect(() => {
    const dataActiveElem = document.querySelector("[data-active=true]");
    if (dataActiveElem) {
      const elem = dataActiveElem.parentElement;
      elem?.scrollIntoView({
        block: "nearest",
        inline: "center",
      });
    }
  }, []);

  if (!ProductRoutes.includes(pathName)) {
    return null;
  }

  if (isEmpty) return null;

  return (
    <div className="min-h-[50px] w-full bg-white">
      <Container>
        <div className="flex gap-5 overflow-auto text-sm text-gray-500 md:overflow-hidden">
          {appLinks.map((x) => {
            return Object.values(x)[0];
          })}
        </div>
      </Container>
    </div>
  );
};

export default ProductBar;