// src/components/TCheckBox/TCheckBoxSquare.jsx

import React, { useCallback, useState } from "react";
import classNames from "classnames";
import Spottable from "@enact/spotlight/Spottable";
import css from "./TCheckBoxSquare.module.less";

const SpottableComponent = Spottable("div");

export default function TCheckBoxSquare({
  className,
  spotlightDisabled,
  spotlightId,
  onFocus,
  onToggle,
  selected = false, // 기본값을 false로 변경
  disabled = false, // disabled prop 추가
  ariaLabel,
  ...rest
}) {
  const [focus, setFocus] = useState(false);

  const _onClick = useCallback(() => {
    // disabled 상태일 때는 클릭 처리하지 않음
    if (disabled || !onToggle) {
      console.log('[TCheckBoxSquare] 클릭 무시됨 - disabled:', disabled, 'onToggle 존재:', !!onToggle);
      return;
    }
    
    console.log('[TCheckBoxSquare] 클릭 처리됨 - 현재 selected:', selected, '-> 새로운 값:', !selected);
    onToggle({ selected: !selected });
  }, [onToggle, selected, disabled]);

  const _onFocus = useCallback(() => {
    if (disabled) return; // disabled 상태일 때는 포커스 처리하지 않음
    
    setFocus(true);
    if (onFocus) {
      onFocus();
    }
  }, [onFocus, disabled]);

  const _onBlur = useCallback(() => {
    setFocus(false);
  }, []);

  return (
    <SpottableComponent
      {...rest}
      className={classNames(
        className,
        css.tCheckBoxSquare,
        focus && css.focus,
        selected && css.selected,
        focus && selected && css.selectedFocus,
        disabled && css.disabled // disabled 클래스 추가
      )}
      spotlightDisabled={spotlightDisabled || disabled} // spotlightDisabled와 disabled 모두 고려
      onClick={_onClick}
      onFocus={_onFocus}
      onBlur={_onBlur}
      spotlightId={spotlightId}
      aria-label={ariaLabel}
      aria-disabled={disabled} // 접근성을 위한 aria-disabled 추가
    ></SpottableComponent>
  );
}
