import { useEffect, useRef, useState } from "react";
import clsx from "clsx";
import { AnimatePresence, m } from "framer-motion";

import CallToAction from "@/components/call-to-action";
import Icon from "@/components/icon";
import { useResizeObserver } from "@/hooks";
import { useIsClient } from "@/hooks";
import { type NavigationItem } from "@/types";

import styles from "./styles.module.scss";

const transition = {
  type: "tween",
  ease: "easeOut",
  duration: 0.15,
};

interface NavTabsProps {
  activeTabIndex: number;
  tabs: NavigationItem[];
  handleTabClick: (index: number) => void;
  className?: string;
  style?: React.CSSProperties;
}

export default function NavTabs({
  tabs,
  activeTabIndex,
  handleTabClick,
  className,
  ...props
}: NavTabsProps) {
  const [buttonRefs, setButtonRefs] = useState<Array<HTMLButtonElement | null>>(
    [],
  );
  const navRef = useRef<HTMLDivElement>(null);

  const isClient = useIsClient();

  useEffect(() => {
    setButtonRefs((prev) => prev.slice(0, tabs.length));
  }, [tabs.length]);

  const navRect = navRef.current?.getBoundingClientRect();
  const activeRect = buttonRefs[activeTabIndex]?.getBoundingClientRect();
  const { height: activeHeight = 0, width: activeWidth = 0 } =
    useResizeObserver({
      ref: buttonRefs[activeTabIndex],
      box: "border-box",
    });

  return (
    <>
      {isClient && (
        <nav ref={navRef} className={clsx(styles.nav, className)} {...props}>
          {tabs.map((tab, index) => (
            <div key={tab.id} className={styles.tab}>
              <CallToAction
                key={tab.id}
                className={clsx(styles.button, {
                  [styles.active]: index === activeTabIndex,
                  [styles.logo]: tab.href === "/",
                })}
                ref={(el: HTMLButtonElement) => {
                  buttonRefs[index] = el;
                }}
                onClick={(event) => {
                  event.preventDefault();
                  handleTabClick(index);
                }}
                variant="button"
              >
                {tab.href === "/" ? (
                  <Icon className={styles.icon} variant="logoLockup" />
                ) : (
                  tab.label
                )}
              </CallToAction>

              <AnimatePresence>
                {activeRect && navRect && (
                  <m.div
                    key="active"
                    className={clsx(styles.activeRect, {
                      [styles.logo]: tab.href === "/",
                    })}
                    initial={{
                      x: activeRect.left - navRect.left,
                      y: activeRect.top - navRect.top,
                      width: activeWidth,
                      height: activeHeight,
                      opacity: 0,
                    }}
                    animate={{
                      x: activeRect.left - navRect.left,
                      y: activeRect.top - navRect.top,
                      width: activeWidth,
                      height: activeHeight,
                      opacity: 1,
                    }}
                    exit={{
                      x: activeRect.left - navRect.left,
                      y: activeRect.top - navRect.top,
                      width: activeWidth,
                      height: activeHeight,
                      opacity: 0,
                    }}
                    transition={transition}
                  />
                )}
              </AnimatePresence>
            </div>
          ))}
        </nav>
      )}
    </>
  );
}