"use client";

import * as React from "react";
import { AnimatePresence, motion, type Transition } from "framer-motion";
import { Plus } from "lucide-react";

import { cn } from "@/lib/utils";

/* ── Animation config ───────────────────────────────────────────── */

const springs = {
  height: { type: "spring", stiffness: 260, damping: 32, restDelta: 0.5 } as Transition,
  content: { duration: 0.5, ease: "easeOut" } as Transition,
  icon: { type: "spring", stiffness: 300, damping: 20 } as Transition,
};

/* ── Context ────────────────────────────────────────────────────── */

type AccordionContextValue = {
  openValues: string[];
  toggle: (value: string) => void;
  type: "single" | "multiple";
};

const AccordionContext = React.createContext<AccordionContextValue>({
  openValues: [],
  toggle: () => {},
  type: "single",
});

const ItemContext = React.createContext<{ value: string; isOpen: boolean }>({
  value: "",
  isOpen: false,
});

/* ── Accordion (root) ───────────────────────────────────────────── */

interface AccordionSingleProps {
  type: "single";
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  collapsible?: boolean;
  className?: string;
  children: React.ReactNode;
}

interface AccordionMultipleProps {
  type: "multiple";
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
  className?: string;
  children: React.ReactNode;
}

type AccordionProps = AccordionSingleProps | AccordionMultipleProps;

function Accordion(props: AccordionProps) {
  const { type, className, children } = props;

  const [internalValues, setInternalValues] = React.useState<string[]>(() => {
    if (type === "single") {
      const sp = props as AccordionSingleProps;
      return sp.defaultValue ? [sp.defaultValue] : [];
    }
    const mp = props as AccordionMultipleProps;
    return mp.defaultValue ?? [];
  });

  const isControlled = props.value !== undefined;
  const openValues = isControlled
    ? type === "single"
      ? (props as AccordionSingleProps).value
        ? [(props as AccordionSingleProps).value!]
        : []
      : ((props as AccordionMultipleProps).value as string[])
    : internalValues;

  const toggle = React.useCallback(
    (value: string) => {
      if (type === "single") {
        const sp = props as AccordionSingleProps;
        const collapsible = sp.collapsible ?? false;
        const isOpen = openValues.includes(value);

        let next: string[];
        if (isOpen && collapsible) {
          next = [];
        } else if (isOpen && !collapsible) {
          next = openValues;
        } else {
          next = [value];
        }

        if (!isControlled) setInternalValues(next);
        sp.onValueChange?.(next[0] ?? "");
      } else {
        const mp = props as AccordionMultipleProps;
        const isOpen = openValues.includes(value);
        const next = isOpen
          ? openValues.filter((v) => v !== value)
          : [...openValues, value];

        if (!isControlled) setInternalValues(next);
        mp.onValueChange?.(next);
      }
    },
    [type, openValues, isControlled, props],
  );

  return (
    <AccordionContext.Provider value={{ openValues, toggle, type }}>
      <div role="region" className={cn("w-full", className)}>
        {children}
      </div>
    </AccordionContext.Provider>
  );
}

/* ── AccordionItem ──────────────────────────────────────────────── */

interface AccordionItemProps {
  value: string;
  className?: string;
  children: React.ReactNode;
}

function AccordionItem({ value, className, children }: AccordionItemProps) {
  const { openValues } = React.useContext(AccordionContext);
  const isOpen = openValues.includes(value);

  return (
    <ItemContext.Provider value={{ value, isOpen }}>
      <div
        data-state={isOpen ? "open" : "closed"}
        className={cn(
          "border-t border-border/40",
          "last:border-b",
          className,
        )}
      >
        {children}
      </div>
    </ItemContext.Provider>
  );
}

/* ── AccordionTrigger ───────────────────────────────────────────── */

interface AccordionTriggerProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
}

const AccordionTrigger = React.forwardRef<
  HTMLButtonElement,
  AccordionTriggerProps
>(({ className, children, ...props }, ref) => {
  const { toggle } = React.useContext(AccordionContext);
  const { value, isOpen } = React.useContext(ItemContext);

  return (
    <h3 className="flex">
      <button
        ref={ref}
        type="button"
        aria-expanded={isOpen}
        data-state={isOpen ? "open" : "closed"}
        onClick={() => toggle(value)}
        className={cn(
          "flex flex-1 cursor-pointer items-center justify-between py-4 text-left text-[15px] font-medium transition-colors",
          className,
        )}
        {...props}
      >
        <span>{children}</span>
        <motion.div
          animate={{ rotate: isOpen ? 45 : 0 }}
          transition={springs.icon}
          className="flex h-5 w-5 shrink-0 items-center justify-center text-muted-foreground"
        >
          <Plus className="h-4 w-4" strokeWidth={1.5} />
        </motion.div>
      </button>
    </h3>
  );
});
AccordionTrigger.displayName = "AccordionTrigger";

/* ── AccordionContent ───────────────────────────────────────────── */

interface AccordionContentProps {
  className?: string;
  children: React.ReactNode;
}

function AccordionContent({ className, children }: AccordionContentProps) {
  const { isOpen } = React.useContext(ItemContext);
  const contentRef = React.useRef<HTMLDivElement>(null);
  const [measuredHeight, setMeasuredHeight] = React.useState(0);

  React.useEffect(() => {
    const el = contentRef.current;
    if (!el) return;

    const observer = new ResizeObserver(([entry]) => {
      if (entry) setMeasuredHeight(entry.contentRect.height);
    });
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return (
    <AnimatePresence initial={false}>
      {isOpen && (
        <motion.div
          key="content"
          role="region"
          initial={{ height: 0 }}
          animate={{ height: measuredHeight || "auto" }}
          exit={{ height: 0 }}
          transition={{ height: springs.height }}
          className="overflow-hidden"
        >
          <div ref={contentRef}>
            <motion.div
              initial={{ opacity: 0, filter: "blur(2px)" }}
              animate={{ opacity: 1, filter: "blur(0px)" }}
              exit={{ opacity: 0, filter: "blur(2px)" }}
              transition={springs.content}
              className={cn(
                "pb-5 pr-8 text-[15px] leading-relaxed text-muted-foreground",
                className,
              )}
            >
              {children}
            </motion.div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
Accordion

Preview

Who is this for?

How do I use this?

What does this not cover?

Who is this for?

How do I use this?

What does this not cover?
