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 { 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;
}

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

  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 (
    <div 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"
                aria-label="Suno logo"
              />
            ) : (
              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>
      ))}
    </div>
  );
};

export default NavTabs;