Faq

"use client";

import {
  createContext,
  type ReactNode,
  useCallback,
  useContext,
  useMemo,
  useState,
} from "react";
import { cn } from "@/lib/utils";

function FaqPlusIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      className={cn("size-4", className)}
      viewBox="0 0 24 24"
    >
      <path
        d="M 0,12 L 24,12"
        stroke="currentColor"
        strokeLinecap="round"
        strokeWidth="3"
      />
      <path
        d="M 12,0 L 12,24"
        stroke="currentColor"
        strokeLinecap="round"
        strokeWidth="3"
      />
    </svg>
  );
}

function FaqMinusIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      className={cn("size-4", className)}
      viewBox="0 0 24 24"
    >
      <path
        d="M 0,12 L 24,12"
        stroke="currentColor"
        strokeLinecap="round"
        strokeWidth="3"
      />
    </svg>
  );
}

interface FaqContextValue {
  isOpen: (value: string) => boolean;
  toggle: (value: string) => void;
}

const FaqContext = createContext<FaqContextValue | null>(null);

function useFaq() {
  const ctx = useContext(FaqContext);
  if (!ctx) {
    throw new Error("Faq components must be used inside <Faq>");
  }
  return ctx;
}

interface FaqItemContextValue {
  open: boolean;
  toggle: () => void;
  value: string;
}

const FaqItemContext = createContext<FaqItemContextValue | null>(null);

function useFaqItem() {
  const ctx = useContext(FaqItemContext);
  if (!ctx) {
    throw new Error(
      "FaqItemHeader and FaqItemContent must be used inside <FaqItem>"
    );
  }
  return ctx;
}

function toItemSet(value: string | string[] | undefined): Set<string> {
  if (value === undefined) {
    return new Set();
  }
  return new Set(Array.isArray(value) ? value : [value]);
}

function toFaqValue(multiple: boolean, items: Set<string>): string | string[] {
  const values = [...items];
  if (!multiple) {
    return values[0] ?? "";
  }
  return values;
}

type FaqProps = React.ComponentProps<"div"> & {
  multiple?: boolean;
  defaultValue?: string | string[];
  value?: string | string[];
  onValueChange?: (value: string | string[]) => void;
};

function Faq({
  multiple = false,
  defaultValue,
  value: controlledValue,
  onValueChange,
  className,
  children,
  ...props
}: FaqProps) {
  const [uncontrolledItems, setUncontrolledItems] = useState<Set<string>>(() =>
    toItemSet(defaultValue)
  );

  const isControlled = controlledValue !== undefined;
  const openItems = isControlled
    ? toItemSet(controlledValue)
    : uncontrolledItems;

  const updateOpenItems = useCallback(
    (next: Set<string>) => {
      if (!isControlled) {
        setUncontrolledItems(next);
      }
      onValueChange?.(toFaqValue(multiple, next));
    },
    [isControlled, onValueChange, multiple]
  );

  const toggle = useCallback(
    (itemValue: string) => {
      const next = new Set(openItems);
      if (next.has(itemValue)) {
        next.delete(itemValue);
      } else if (multiple) {
        next.add(itemValue);
      } else {
        next.clear();
        next.add(itemValue);
      }
      updateOpenItems(next);
    },
    [openItems, multiple, updateOpenItems]
  );

  const isOpen = useCallback(
    (itemValue: string) => openItems.has(itemValue),
    [openItems]
  );

  const contextValue = useMemo(() => ({ isOpen, toggle }), [isOpen, toggle]);

  return (
    <FaqContext.Provider value={contextValue}>
      <div
        className={cn("flex flex-col", className)}
        data-slot="faq"
        {...props}
      >
        {children}
      </div>
    </FaqContext.Provider>
  );
}
Faq.displayName = "Faq";

interface FaqItemProps {
  children: ReactNode;
  className?: string;
  value: string;
}

function FaqItem({ value, className, children }: FaqItemProps) {
  const { isOpen, toggle } = useFaq();
  const open = isOpen(value);

  const itemContextValue = useMemo(
    () => ({
      open,
      toggle: () => toggle(value),
      value,
    }),
    [value, open, toggle]
  );

  return (
    <FaqItemContext.Provider value={itemContextValue}>
      <div
        className={cn("faq-item", className)}
        data-slot="faq-item"
        role="group"
      >
        {children}
      </div>
    </FaqItemContext.Provider>
  );
}
FaqItem.displayName = "FaqItem";

type FaqItemHeaderProps = Omit<React.ComponentProps<"button">, "type"> & {
  iconClassName?: string;
};

function FaqItemHeader({
  className,
  children,
  onClick,
  iconClassName,
  ...props
}: FaqItemHeaderProps) {
  const { open, toggle } = useFaqItem();
  return (
    <button
      aria-expanded={open}
      className={cn(
        "flex w-full items-center justify-between gap-4 py-6",
        className
      )}
      onClick={(event) => {
        toggle();
        onClick?.(event);
      }}
      type="button"
      {...props}
    >
      <div className="flex min-w-0 flex-1">{children}</div>
      <span
        className={cn(
          "transition-transform duration-400 ease-[cubic-bezier(0.33,1.53,0.69,0.99)] data-[state=open]:rotate-360 motion-reduce:transition-none",
          iconClassName
        )}
        data-state={open ? "open" : "closed"}
      >
        {open ? <FaqMinusIcon /> : <FaqPlusIcon />}
      </span>
    </button>
  );
}
FaqItemHeader.displayName = "FaqItemHeader";

type FaqItemContentProps = React.ComponentProps<"div">;

function FaqItemContent({
  className,
  children,
  ...props
}: FaqItemContentProps) {
  const { open } = useFaqItem();
  return (
    <div
      className="grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 ease-in-out data-[state=open]:grid-rows-[1fr] data-[state=open]:duration-350 data-[state=open]:ease-out motion-reduce:transition-none"
      data-state={open ? "open" : "closed"}
      inert={!open}
    >
      <div className="overflow-hidden">
        <div className={cn("flex flex-col gap-4 pb-3", className)} {...props}>
          {children}
        </div>
      </div>
    </div>
  );
}
FaqItemContent.displayName = "FaqItemContent";

type FaqDividerProps = React.ComponentProps<"hr">;

function FaqDivider({ className, ...props }: FaqDividerProps) {
  return (
    <hr
      className={cn(
        "h-px w-full border-0 transition-opacity duration-200",
        "bg-gray-500/20",
        className
      )}
      data-slot="faq-divider"
      {...props}
    />
  );
}
FaqDivider.displayName = "FaqDivider";

export type {
  FaqDividerProps,
  FaqItemContentProps,
  FaqItemHeaderProps,
  FaqItemProps,
  FaqProps,
};
export { Faq, FaqDivider, FaqItem, FaqItemContent, FaqItemHeader };