/* ============================================================================
 * 서명전에 — TDS BoardRow 컴포넌트
 *  · 제한된 공간에서 Q&A 등 반복 정보를 아코디언 형태로 표시
 *  · 서브: BoardRow.Prefix / BoardRow.Text / BoardRow.ArrowIcon
 *  · controlled (isOpened + onOpen/onClose) 또는
 *    uncontrolled (initialOpened 내부 state) 모드 지원
 *  · aria-expanded 자동 관리 — 스크린 리더에서 열림/닫힘 상태 전달
 * ==========================================================================
 *
 *  Typography prop 매핑 (TDS t1~t7 / st1~st13)
 *    t1..t7       → --ty-1..7
 *    st1..st13    → --sub-ty-1..13
 *
 *  FontWeight prop 매핑 (TDS regular/medium/semibold/bold + light)
 *    regular      → --w-regular
 *    medium       → --w-medium
 *    semibold     → --w-semibold
 *    bold         → --w-bold
 *    light        → --w-light
 * ========================================================================== */

function __tyVars(typography) {
  if (!typography) return null;
  const key = typography.startsWith("st")
    ? `--sub-ty-${typography.slice(2)}`
    : typography.startsWith("t")
      ? `--ty-${typography.slice(1)}`
      : null;
  if (!key) return null;
  return {
    fontSize:   `var(${key}-fs)`,
    lineHeight: `var(${key}-lh)`,
  };
}
function __wVar(weight) {
  if (!weight) return null;
  return { fontWeight: `var(--w-${weight})` };
}

/* ----------------------------- BoardRow root ----------------------------- */
function BoardRow({
  title,
  initialOpened = false,
  isOpened,            // controlled
  onOpen,
  onClose,
  prefix,
  icon,
  children,
  liAttributes,
}) {
  const [inner, setInner] = useState(!!initialOpened);
  const isControlled = typeof isOpened === "boolean";
  const open = isControlled ? isOpened : inner;

  const toggle = () => {
    if (open) {
      if (isControlled) onClose && onClose();
      else              setInner(false);
    } else {
      if (isControlled) onOpen && onOpen();
      else              setInner(true);
    }
  };

  return (
    <div
      className={"board-row" + (open ? " is-open" : "")}
      {...(liAttributes || {})}
    >
      <button
        type="button"
        className="board-row__head"
        onClick={toggle}
        aria-expanded={open}
      >
        {prefix && <span className="board-row__prefix">{prefix}</span>}
        <span className="board-row__title">{title}</span>
        {icon && <span className="board-row__icon">{icon}</span>}
      </button>
      {open && <div className="board-row__content">{children}</div>}
    </div>
  );
}

/* --------------------------- BoardRow.Prefix ---------------------------- */
BoardRow.Prefix = function BoardRowPrefix({
  typography = "st8",          // spec default
  fontWeight = "regular",      // spec default
  color = "var(--tds-blue-500)", // spec default adaptive.blue500
  children,
}) {
  const style = {
    ...__tyVars(typography),
    ...__wVar(fontWeight),
    color,
    display: "inline-flex",
    alignItems: "center",
  };
  return <span style={style}>{children}</span>;
};

/* ---------------------------- BoardRow.Text ----------------------------- */
BoardRow.Text = function BoardRowText({ typography = "t6", children }) {
  const style = {
    ...__tyVars(typography),
    fontWeight: "var(--w-regular)",
    margin: 0,
  };
  return <p className="board-row__text" style={style}>{children}</p>;
};

/* ------------------------- BoardRow.ArrowIcon --------------------------- *
 *  스펙 기본: name="icon-arrow-right-mono", color=adaptive.grey400, size=24
 *  우리 IOSIcon 의 "chev-right" 아이콘을 기본으로 쓰고, 부모 .board-row.is-open
 *  일 때 CSS 가 rotate(90deg) 로 회전시킴.
 * ----------------------------------------------------------------------- */
BoardRow.ArrowIcon = function BoardRowArrowIcon({
  size = 20,                       // TDS 기본은 24 지만 FAQ 행에는 20 이 시각적으로 더 맞음
  color,                           // undefined 면 CSS 기본(.board-row__icon) 사용
}) {
  const style = color ? { color } : undefined;
  return (
    <span style={style}>
      <IOSIcon name="chev-right" size={size} />
    </span>
  );
};

window.BoardRow = BoardRow;

Object.assign(window, { BoardRow });