Ornament

"use client";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@radix-ui/react-tabs";
import { AnimatePresence, motion } from "motion/react";
import React, { createContext, useContext, useRef, useState } from "react";
import { cn } from "@/lib/utils";
import { Button } from "../core/button";
import { Text } from "../ui/typography";
import { Window, type WindowProps } from "./window";

const CONSTANTS = {
  EXPANDED_WIDTH: "100%",
  COLLAPSED_WIDTH: 44,
  ENTERANCE_TIMEOUT: 700,
  EXITANCE_TIMEOUT: 500,
  TAB_EXIT_TIMEOUT: 480,
  TEXT_TRANSITION_CONFIG: {
    duration: 0.4,
  },
  ORNAMENT_TRANSITION_CONFIG: {
    type: "spring",
    bounce: 0,
    duration: 0.7,
  },
} as const;

const WINDOW_VARIANTS = {
  hidden: {
    opacity: 0,
  },
  visible: {
    opacity: 1,
    transition: {
      type: "spring",
      damping: 18,
      stiffness: 90,
      delay: 0.25,
    },
  },
  exit: {
    opacity: 0,
    transition: {
      type: "spring",
      damping: 18,
      stiffness: 90,
    },
  },
} as const;

const FOOTER_VARIANTS = {
  hidden: {
    opacity: 0,
    scale: 0.95,
  },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      type: "spring",
      duration: 0.2,
      bounce: 0,
      delay: 0.7,
    },
  },
  exit: {
    opacity: 0,
    scale: 0.95,
  },
} as const;

// Create a context for the active tab
const OrnamentContext = createContext<{
  activeTab: string;
  isExpanded: boolean;
  isMouseDown: boolean;
  isUnmounting: boolean;
  contentClassName?: string;
  setIsMouseDown: React.Dispatch<React.SetStateAction<boolean>>;
  setActiveTab: React.Dispatch<React.SetStateAction<string>>;
  setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
  setContentClassName: React.Dispatch<React.SetStateAction<string>>;
  setIsUnmounting: React.Dispatch<React.SetStateAction<boolean>>;
  handleOrnamentItemClick: () => void;
  handleOrnamentItemMouseDown: () => void;
  handleOrnamentItemMouseUp: () => void;
  handleOrnamentItemFocus: () => void;
  handleOrnamentItemBlur: () => void;
}>({
  activeTab: "",
  isExpanded: false,
  isMouseDown: false,
  isUnmounting: false,
  contentClassName: "",
  setIsMouseDown: () => {},
  setActiveTab: () => {},
  setIsExpanded: () => {},
  setContentClassName: () => {},
  setIsUnmounting: () => {},
  handleOrnamentItemClick: () => {},
  handleOrnamentItemMouseDown: () => {},
  handleOrnamentItemMouseUp: () => {},
  handleOrnamentItemFocus: () => {},
  handleOrnamentItemBlur: () => {},
});

export function useOrnament() {
  const context = useContext(OrnamentContext);
  if (!context) {
    throw new Error("useOrnament must be used within a OrnamentContext");
  }
  return context;
}

const Ornament = ({
  children,
  className,
  defaultTab,
}: {
  children: React.ReactNode;
  className?: string;
  defaultTab?: string;
}) => {
  const [activeTab, setActiveTab] = useState(defaultTab || "");
  const [isExpanded, setIsExpanded] = useState(false);
  const [isMouseDown, setIsMouseDown] = useState(false);
  const [isUnmounting, setIsUnmounting] = useState(false);
  const timeoutEnterRef = useRef<NodeJS.Timeout | null>(null);
  const timeoutLeaveRef = useRef<NodeJS.Timeout | null>(null);
  const [contentClassName, setContentClassName] = useState("");
  const handleMouseEnter = () => {
    if (timeoutLeaveRef.current) {
      clearTimeout(timeoutLeaveRef.current);
    }
    timeoutEnterRef.current = setTimeout(() => {
      setIsExpanded(true);
    }, CONSTANTS.ENTERANCE_TIMEOUT);
  };

  const handleMouseLeave = () => {
    if (timeoutEnterRef.current) {
      clearTimeout(timeoutEnterRef.current);
    }
    timeoutLeaveRef.current = setTimeout(() => {
      setIsExpanded(false);
    }, CONSTANTS.EXITANCE_TIMEOUT);
  };

  const handleOrnamentItemMouseDown = () => {
    setIsMouseDown(true);
  };

  const handleOrnamentItemMouseUp = () => {
    setIsMouseDown(false);
  };

  const handleOrnamentItemClick = () => {
    if (timeoutEnterRef.current) clearTimeout(timeoutEnterRef.current);
    if (timeoutLeaveRef.current) clearTimeout(timeoutLeaveRef.current);
  };

  const handleOrnamentItemFocus = () => {
    handleMouseEnter();
  };

  const handleOrnamentItemBlur = () => {
    handleMouseLeave();
  };

  return (
    <OrnamentContext.Provider
      value={{
        activeTab,
        isExpanded,
        isMouseDown,
        isUnmounting,
        contentClassName,
        setIsUnmounting,
        setIsMouseDown,
        setActiveTab,
        setIsExpanded,
        setContentClassName,
        handleOrnamentItemClick,
        handleOrnamentItemMouseDown,
        handleOrnamentItemMouseUp,
        handleOrnamentItemFocus,
        handleOrnamentItemBlur,
      }}
    >
      <Tabs
        orientation="vertical"
        className={cn(
          "relative grid h-full w-full flex-1 grid-cols-[68px_1fr] place-content-center gap-4 md:gap-7 lg:ml-[-96px]",
          "max-w-3xl xl:max-w-4xl 2xl:max-w-6xl",
          className
        )}
        defaultValue={defaultTab}
        aria-label="Navigation and content panels"
      >
        <div className="sr-only">
          This navigation menu expands when focused. Use tab key to navigate between tabs.
        </div>
        {children}
      </Tabs>
    </OrnamentContext.Provider>
  );
};

const OrnamentTabs = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => {
  const { isExpanded, isMouseDown, handleOrnamentItemFocus, handleOrnamentItemBlur } =
    useOrnament();

  return (
    <Window
      className={"hide-scrollbar relative z-[42] mx-auto flex items-center justify-start p-3"}
      initial={{
        opacity: 0,
        scale: 1,
      }}
      animate={{
        opacity: 1,
        scale: isMouseDown ? 1 : isExpanded ? 1.05 : 1,
      }}
      exit={{
        opacity: 0,
      }}
      transition={CONSTANTS.ORNAMENT_TRANSITION_CONFIG}
      aria-label="Navigation tabs"
    >
      <TabsList asChild>
        <motion.div
          onMouseEnter={handleOrnamentItemFocus}
          onMouseLeave={handleOrnamentItemBlur}
          className={cn("flex flex-col items-start gap-2", className)}
        >
          {children}
        </motion.div>
      </TabsList>
    </Window>
  );
};

const OrnamentTab = ({
  icon,
  label,
  value,
  onClick,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
  onClick?: () => void;
}) => {
  const {
    activeTab,
    setActiveTab,
    isExpanded,
    setIsUnmounting,
    handleOrnamentItemClick,
    handleOrnamentItemMouseDown,
    handleOrnamentItemMouseUp,
    handleOrnamentItemFocus,
    handleOrnamentItemBlur,
  } = useOrnament();
  const [isHovered, setIsHovered] = useState(false);

  const handleClick = () => {
    setIsUnmounting(true);
    setTimeout(() => {
      setActiveTab(value);
      setIsUnmounting(false);
    }, CONSTANTS.TAB_EXIT_TIMEOUT);
    handleOrnamentItemClick();
    onClick?.();
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      handleClick();
    }
  };

  const isActive = activeTab === value;
  const variant = isHovered ? "default" : isActive ? "default" : "secondary";

  return (
    <motion.div
      initial={false}
      animate={{
        width: isExpanded ? CONSTANTS.EXPANDED_WIDTH : CONSTANTS.COLLAPSED_WIDTH,
      }}
      transition={CONSTANTS.ORNAMENT_TRANSITION_CONFIG}
    >
      <TabsTrigger value={value} asChild>
        <Button
          id={`ornament-tab-${value}`}
          className="flex w-full items-center justify-stretch rounded-full px-[10px] before:rounded-full"
          onClick={handleClick}
          onMouseDown={handleOrnamentItemMouseDown}
          onMouseUp={handleOrnamentItemMouseUp}
          onFocus={handleOrnamentItemFocus}
          onBlur={handleOrnamentItemBlur}
          onMouseEnter={() => setIsHovered(true)}
          onMouseLeave={() => setIsHovered(false)}
          onKeyDown={handleKeyDown}
          variant={variant}
          aria-expanded={isExpanded}
        >
          <div
            className="relative mr-4 flex-shrink-0 [&_[data-slot='icon']]:size-6"
            aria-hidden="true"
          >
            {icon}
          </div>
          <motion.span
            className="flex-1 overflow-hidden text-start"
            initial={{
              width: 0,
            }}
            animate={{
              width: isExpanded ? "auto" : 0,
            }}
            transition={CONSTANTS.TEXT_TRANSITION_CONFIG}
          >
            <Text
              size="title3"
              variant={isHovered ? "default" : variant}
              className="line-clamp-1 w-fit min-w-[60px] truncate font-medium leading-[24px]"
            >
              {label}
            </Text>
          </motion.span>
        </Button>
      </TabsTrigger>
    </motion.div>
  );
};

interface OrnamentContentsApiProps {
  children: React.ReactNode;
  /**
   * A helper class name for all children `OrnamentContent` components.
   *
   * You can also customize each `OrnamentContent` component individually.
   */
  contentClassName?: string;
}

const OrnamentContents = ({ children, contentClassName }: OrnamentContentsApiProps) => {
  const { setContentClassName } = useOrnament();
  React.useEffect(() => {
    if (contentClassName) {
      setContentClassName(contentClassName);
    }
  }, [contentClassName, setContentClassName]);

  return children;
};

interface OrnamentContentApiProps {
  value: string;
  /**
   * Rendered at the top of the content. Can be a React Component (e.g. SomeComponent), or a React element (e.g. <SomeComponent />).
   */
  HeaderComponent?: React.ReactNode | React.ComponentType;
  /**
   * Rendered at the bottom of the content. Can be a React Component (e.g. SomeComponent), or a React element (e.g. <SomeComponent />).
   */
  FooterComponent?: React.ReactNode | React.ComponentType;
}

interface OrnamentContentProps extends WindowProps, OrnamentContentApiProps {}

const OrnamentContent = ({
  value,
  HeaderComponent,
  FooterComponent,
  className,
  rootClassName,
  ...props
}: OrnamentContentProps) => {
  const { activeTab, contentClassName } = useOrnament();
  const isActive = activeTab === value;

  return (
    <AnimatePresence mode="popLayout">
      {isActive && (
        <TabsContent
          value={value}
          key={`ornament-content-${value}`}
          forceMount
          className={cn("relative order-2 flex w-full flex-col", className)}
          data-slot="content"
          id={`ornament-content-${value}`}
          tabIndex={-1}
        >
          {HeaderComponent &&
            (typeof HeaderComponent === "function" ? <HeaderComponent /> : HeaderComponent)}
          <Window
            className={cn(contentClassName, className)}
            rootClassName={cn("items-stretch", rootClassName)}
            scroll
            initial={WINDOW_VARIANTS.hidden}
            animate={WINDOW_VARIANTS.visible}
            exit={WINDOW_VARIANTS.exit}
            transition={CONSTANTS.ORNAMENT_TRANSITION_CONFIG}
            {...props}
          />
          {FooterComponent && (
            <motion.div
              initial={FOOTER_VARIANTS.hidden}
              animate={FOOTER_VARIANTS.visible}
              exit={FOOTER_VARIANTS.exit}
              transition={{
                duration: 0.1,
              }}
              className="absolute right-0 bottom-0 left-0 z-[41] flex items-center justify-center"
            >
              {typeof FooterComponent === "function" ? <FooterComponent /> : FooterComponent}
            </motion.div>
          )}
        </TabsContent>
      )}
    </AnimatePresence>
  );
};

/**
 * A motion.div without a window, header or footer.
 */
const OrnamentContentBase = ({
  children,
  value,
  className,
}: {
  children: React.ReactNode;
  value: string;
  className?: string;
}) => {
  const { activeTab, contentClassName, isUnmounting } = useOrnament();
  const isActive = activeTab === value;
  return (
    <AnimatePresence mode="popLayout">
      {isActive && !isUnmounting && (
        <TabsContent
          value={value}
          key={`ornament-content-${value}-active`}
          forceMount
          className="order-2 flex w-full flex-col"
          tabIndex={-1}
          asChild
        >
          <motion.div
            className={cn(className, contentClassName)}
            initial={WINDOW_VARIANTS.hidden}
            animate={WINDOW_VARIANTS.visible}
            exit={WINDOW_VARIANTS.exit}
            transition={CONSTANTS.ORNAMENT_TRANSITION_CONFIG}
          >
            {children}
          </motion.div>
        </TabsContent>
      )}
    </AnimatePresence>
  );
};

export {
  Ornament,
  OrnamentTabs,
  OrnamentTab,
  OrnamentContents,
  OrnamentContent,
  OrnamentContentBase,
};

export type { OrnamentContentApiProps, OrnamentContentsApiProps };