"use client";

import { useId, useState, type ReactNode } from "react";
import { cx } from "../../utils";
import { FoxCaretCircleRightIcon, FoxCaretCircleUpIcon } from "../../icons";

export interface FoxDisclosureProps {
  title: ReactNode;
  children?: ReactNode;
  /** 주면 호출부가 열림을 소유한다. 없으면 컴포넌트가 스스로 여닫는다. */
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  /** 배치 조정용. */
  className?: string;
}

/**
 * @fox 디스클로저. 제목 한 줄을 누르면 아래 내용이 열린다.
 *
 * FoxAccordion과 겹쳐 보이지만 시안이 따로 둔 별개 컴포넌트다 — 바탕·테두리·크기 축이
 * 없고 캐럿이 제목 앞에 온다. 목록을 나누는 아코디언과 달리 글 사이에 끼우는 접기다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxDisclosure({
  title,
  children,
  open,
  defaultOpen = false,
  onOpenChange,
  hidden = false,
  className,
}: FoxDisclosureProps) {
  const autoId = useId();
  const [inner, setInner] = useState(defaultOpen);

  if (hidden) {
    return null;
  }

  const expanded = open ?? inner;
  const panelId = `${autoId}-panel`;

  const toggle = () => {
    if (open === undefined) {
      setInner(!expanded);
    }
    onOpenChange?.(!expanded);
  };

  return (
    <div
      className={cx(
        "fox-disclosure",
        expanded && "fox-disclosure--open",
        className
      )}
    >
      <button
        className="fox-disclosure__tit"
        type="button"
        aria-expanded={expanded}
        aria-controls={panelId}
        onClick={toggle}
      >
        <span className="fox-disclosure__icon" aria-hidden="true">
          {expanded ? <FoxCaretCircleUpIcon /> : <FoxCaretCircleRightIcon />}
        </span>
        <span className="fox-disclosure__title">{title}</span>
      </button>

      {/* 닫혔을 때는 DOM에서 뺀다 — 안의 초점 가능한 것들이 탭 순서에 남으면 안 된다. */}
      {expanded && (
        <div className="fox-disclosure__contents" id={panelId}>
          {children}
        </div>
      )}
    </div>
  );
}