"use client";

import React, { useEffect, useState } from "react";
import {
  OrderedAccordionView,
  OrderedSidebarView,
  OrderedTabView,
} from "./ordered-tab-views";
import { AccordionView, SidebarView, TabView } from "./tab-views";
import { DynamicTabsT } from "./types";

import { Text } from "@shared/components/text";

export function DynamicTabs(props: DynamicTabsT) {
  const [currentTabIndex, setCurrentTabIndex] = useState(0);
  const [fragment, setFragment] = useState("");
  const [subitemColCount, setSubitemColCount] = useState<number>(2);
  const {
    title,
    subTitle,
    tabs,
    navigationType = true,
    mobileSidebarTabType = true,
    dynamic = false,
    isOrderedList = false,
  } = props;

  const items = tabs?.items ?? [];

  useEffect(() => {
    if (typeof window !== "undefined") {
      setFragment(window.location.hash);

      const handleHashChange = () => {
        setFragment(window.location.hash);
      };
      window.addEventListener("hashchange", handleHashChange);
      return () => {
        window.removeEventListener("hashchange", handleHashChange);
      };
    }
  }, []);

  useEffect(() => {
    tabs?.items?.some((tab, index) => {
      const tabId = `#${tab?.anchorId || "tab-" + index}`;
      if (tabId === fragment) {
        setCurrentTabIndex(index);
        return true;
      }
    });
  }, [tabs, fragment]);

  useEffect(() => {
    if (!dynamic) return;

    const updateSubitemColCount = () => {
      if (typeof window === "undefined") return;
      const width = window.innerWidth;
      if (width <= 640) {
        setSubitemColCount(2); // Small devices
      } else if (width > 750 || width <= 768) {
        setSubitemColCount(3); // Medium devices
      } else if (width <= 1024) {
        setSubitemColCount(2); // Large devices
      } else {
        setSubitemColCount(3); // Large devices
      }
    };

    updateSubitemColCount();
    window.addEventListener("resize", updateSubitemColCount);

    return () => {
      window.removeEventListener("resize", updateSubitemColCount);
    };
  }, [dynamic]);

  const handleTabClick = (index: number, anchor: string) => {
    setCurrentTabIndex(index);

    if (typeof window !== "undefined" && fragment) {
      window.location.hash = anchor || "";
    }
  };

  return (
    <div>
      {title || subTitle ? (
        <div className="mb-8 mt-5 flex flex-col gap-5 md:gap-6">
          {title ? (
            <Text className="heading2 px-5 md:heading1 md:text-center">
              {title}
            </Text>
          ) : null}
          {subTitle ? (
            <Text className="subheading3 px-5 md:subheading1 md:text-center">
              {subTitle}
            </Text>
          ) : null}
        </div>
      ) : null}

      {dynamic && isOrderedList ? (
        <>
          <div className="lg:hidden">
            {mobileSidebarTabType ? (
              <OrderedTabView
                items={items}
                currentTabIndex={currentTabIndex}
                subitemColCount={subitemColCount}
                onTabClick={handleTabClick}
              />
            ) : (
              <OrderedAccordionView
                items={items}
                currentTabIndex={currentTabIndex}
                subitemColCount={subitemColCount}
                onTabClick={handleTabClick}
                setCurrentTabIndex={setCurrentTabIndex}
              />
            )}
          </div>

          <div className="hidden lg:block">
            {navigationType ? (
              <OrderedTabView
                items={items}
                currentTabIndex={currentTabIndex}
                subitemColCount={subitemColCount}
                onTabClick={handleTabClick}
              />
            ) : (
              <OrderedSidebarView
                items={items}
                currentTabIndex={currentTabIndex}
                subitemColCount={subitemColCount}
                onTabClick={handleTabClick}
              />
            )}
          </div>
        </>
      ) : (
        <>
          <div className="md:hidden">
            {mobileSidebarTabType ? (
              <TabView
                items={items}
                currentTabIndex={currentTabIndex}
                onTabClick={handleTabClick}
              />
            ) : (
              <AccordionView
                items={items}
                currentTabIndex={currentTabIndex}
                onTabClick={handleTabClick}
              />
            )}
          </div>

          <div className="hidden md:block">
            {navigationType ? (
              <TabView
                items={items}
                currentTabIndex={currentTabIndex}
                onTabClick={handleTabClick}
              />
            ) : (
              <SidebarView
                items={items}
                currentTabIndex={currentTabIndex}
                onTabClick={handleTabClick}
              />
            )}
          </div>
        </>
      )}
    </div>
  );
}