"use client";

import { useRef, type ReactNode } from "react";
import { cx } from "../../utils";
import { FoxRadio, type FoxRadioSize } from "../fox-radio";
import { FoxSelect, type FoxSelectItem } from "../fox-select";

export type FoxConditionalOptionOrientation = "horizontal" | "vertical";

export interface FoxConditionalOptionProps {
  /** 라디오 값. 같은 `name` 안에서 이 칸을 가리킨다. */
  value: string;
  label: ReactNode;
  /** 라벨 아래 보조 설명. 넘기지 않으면 영역을 렌더링하지 않는다. */
  description?: ReactNode;
  /** 딸린 select의 목록. */
  options: FoxSelectItem[];
  /** 딸린 select의 값(제어). 넘기지 않으면 안에서 들고 있는다. */
  detail?: string;
  /** 비제어로 쓸 때 딸린 select의 초기 값. */
  defaultDetail?: string;
  /** 딸린 select 값이 바뀔 때 부른다. 값이 첫 인자다. */
  onChange?: (detail: string) => void;
  /** 이 칸이 선택될 때 부른다 — select를 골라 자동으로 켜진 경우도 포함이다. */
  onCheck?: (value: string) => void;
  /** 아무것도 고르지 않았을 때 select에 보여줄 문구. */
  placeholder?: ReactNode;
  orientation?: FoxConditionalOptionOrientation;
  /** 라디오 묶음 이름. `FoxRadioGroup` 안에 넣으면 그룹이 넣어 주므로 직접 적지 않아도 된다. */
  name?: string;
  /** `FoxRadioGroup`이 넣어 준다. 직접 넣으면 그 값이 라디오 크기가 된다. */
  size?: FoxRadioSize;
  /** 라디오를 처음부터 선택된 채로 둔다(비제어). */
  defaultChecked?: boolean;
  /** 주면 선택 여부를 호출부가 소유한다. */
  checked?: boolean;
  disabled?: boolean;
  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
  hidden?: boolean;
  /** 배치 조정용. */
  className?: string;
}

const ORIENTATION_CLASS: Record<FoxConditionalOptionOrientation, string> = {
  horizontal: "fox-conditional-option--horizontal",
  vertical: "fox-conditional-option--vertical",
};

/**
 * @fox 후속 질문이 딸린 선택지. 라디오 한 칸과 select를 묶어 하나의 답으로 다룬다.
 *
 * select는 이 칸이 골라지지 않아도 **조작할 수 있다.** 값을 고르면 라디오가 자동으로 켜진다 —
 * 값을 고르고도 라디오를 안 눌러 답이 비는 일이 흔해서다. 반대로 select를 잠가 두면 그 자동
 * 선택 자체가 불가능해진다(`disabled`는 클릭을 먹지 않는다).
 *
 * 켜는 방법은 숨은 input을 실제로 클릭하는 것이다. 그래야 같은 `name`의 다른 칸이 꺼지는
 * 것과 change 이벤트가 브라우저 규칙 그대로 일어난다 — `checked`를 직접 대입하면 이벤트가
 * 뛰지 않아 호출부가 모른다.
 *
 * `FoxRadioGroup` 안에 그대로 넣을 수 있다 — 그룹이 `name`·`size`를 넣어 준다.
 *
 * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
 * (또는 개별 파티셜)로 한 번 불러와야 한다.
 */
export function FoxConditionalOption({
  value,
  label,
  description,
  options,
  detail,
  defaultDetail,
  onChange,
  onCheck,
  placeholder,
  orientation = "vertical",
  name,
  size = "lg",
  defaultChecked,
  checked,
  disabled = false,
  hidden = false,
  className,
}: FoxConditionalOptionProps) {
  const radioRef = useRef<HTMLInputElement>(null);

  if (hidden) {
    return null;
  }

  // 비제어일 때의 값은 `FoxSelect`가 이미 들고 있다 — 여기서 또 들면 두 벌이 어긋난다.
  const handleDetail = (next: string) => {
    onChange?.(next);

    // 선택 여부는 DOM에서 읽는다 — 형제 칸을 고르면 이 칸이 조용히 꺼지므로 따로 들고 있으면
    // 어긋난다. 이미 켜져 있으면 다시 클릭해 change를 중복으로 뛰우지 않는다.
    if (radioRef.current && !radioRef.current.checked) {
      radioRef.current.click();
    }
  };

  return (
    <div className={cx("fox-conditional-option", ORIENTATION_CLASS[orientation], className)}>
      <FoxRadio
        ref={radioRef}
        name={name}
        value={value}
        label={label}
        description={description}
        size={size}
        checked={checked}
        defaultChecked={defaultChecked}
        disabled={disabled}
        onChange={onCheck}
      />

      <div className="fox-conditional-option__detail">
        <FoxSelect
          size="md"
          options={options}
          value={detail}
          defaultValue={defaultDetail}
          placeholder={placeholder}
          onValueChange={handleDetail}
          disabled={disabled}
        />
      </div>
    </div>
  );
}