/* ============================================================================
 * 서명전에 — TDS GridList 컴포넌트
 *  · 그리드 형태로 GridList.Item 들을 배치해요.
 *  · column={1 | 2 | 3} — 기본 3.  (1=강조 메뉴, 2=큰 아이템, 3=일반 카테고리)
 *  · 1열 그리드는 이미지 좌 / 텍스트 우의 가로 스택으로 자동 전환돼요.
 *  · GridList.Item 은 이미지(필수) + 텍스트(하단 Paragraph) 로 구성.
 *  · 모바일 터치 시 scale(0.95) 로 "확대 효과" 피드백 — TDS 스펙의 핵심 UX.
 *  · onClick 을 넘기면 자동으로 role="button" + tabIndex=0 + Enter/Space 키보드
 *    핸들러가 붙어요. (의미론적 <button> 대신 <li> 위에 role 부여한 이유는
 *    TDS 원본 스펙이 리스트 의미를 유지하기 때문.)
 *
 *  · props (GridListProps):
 *      column     1 | 2 | 3 — 기본 3. 허용 값 외면 콘솔 경고 + 3으로 폴백
 *      children   주로 <GridList.Item /> 들
 *      className  추가 클래스 패스스루
 *      style, aria-*, data-*  루트 <ul> 로 패스스루
 *
 *  · props (GridListItemProps):
 *      image*     ReactNode — 필수. <img>, SVG, <IOSIcon /> 등 자유
 *      children   ReactNode — 하단 텍스트. Paragraph 로 렌더 (없으면 생략)
 *      onClick    (e) => void — 있으면 clickable 모드 자동 활성
 *      disabled   boolean — 클릭 차단 + opacity 0.4 + scale 피드백 무효
 *      className  추가 클래스 패스스루
 *      aria-label, aria-*, data-* 등 <li> 속성 전부 패스스루
 * ========================================================================== */

function GridList({ column = 3, className = "", children, ...rest }) {
  const allowed = column === 1 || column === 2 || column === 3;
  const safeColumn = allowed ? column : 3;
  if (!allowed) {
    if (window.console && console.warn) {
      console.warn(
        "[GridList] `column` 은 1, 2, 3 중 하나만 허용합니다. 받은 값:",
        column
      );
    }
  }
  const cls = [
    "tds-gridlist",
    `tds-gridlist--col-${safeColumn}`,
    className,
  ]
    .filter(Boolean)
    .join(" ");
  return (
    <ul className={cls} {...rest}>
      {children}
    </ul>
  );
}

function GridListItem({
  image,
  children,
  className = "",
  onClick,
  disabled = false,
  ...rest
}) {
  const clickable = typeof onClick === "function";

  const handleClick = (e) => {
    if (disabled) {
      e.preventDefault();
      e.stopPropagation();
      return;
    }
    onClick?.(e);
  };

  const handleKeyDown = (e) => {
    if (!clickable || disabled) return;
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      onClick(e);
    }
  };

  const cls = [
    "tds-gridlist-item",
    clickable && "is-clickable",
    disabled && "is-disabled",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  const liProps = {
    className: cls,
    onClick: clickable ? handleClick : undefined,
    onKeyDown: clickable ? handleKeyDown : undefined,
    role: clickable ? "button" : undefined,
    tabIndex: clickable && !disabled ? 0 : undefined,
    "aria-disabled": disabled || undefined,
    ...rest,
  };

  return (
    <li {...liProps}>
      <span className="tds-gridlist-item__image" aria-hidden="true">
        {image}
      </span>
      {children !== undefined && children !== null && children !== "" && (
        <p className="tds-gridlist-item__label">{children}</p>
      )}
    </li>
  );
}

GridList.Item = GridListItem;

window.GridList = GridList;

Object.assign(window, { GridList });