import React from 'react';
import './Checkbox.css';

/* 多选框（移动端）— 规格 §34
   一组里可以同时选中多项；勾选态用「勾号出现/消失」+ aria-checked 双通道表达（不只靠颜色）。
   含全选形态：全选行不存储自己的状态，而是由组内各项推导出「全选 / 半选 / 空」三态
   （半选写 aria-checked="mixed"，这是 checkbox 角色允许的第三个值）。
   整行（方框 + 文字）都是 44px 高的热区。本端只回传下一组值，是否采纳由宿主决定。 */

export default function Checkbox({
  options = [],
  value = [],
  orientation = 'vertical',
  button = false,
  selectAll = false,
  disabled = false,
  label = '多选项',
  onChange,
  children = null,
}) {
  const picked = Array.isArray(value) ? value : [];
  const chosen = options.filter((o) => o && picked.indexOf(o.value) >= 0);

  const cls =
    'kole-m-checkbox-group' +
    (orientation === 'horizontal' ? ' kole-m-checkbox-group--horizontal' : '') +
    (disabled ? ' is-disabled' : '');

  function toggle(key) {
    if (disabled) return;
    const has = picked.indexOf(key) >= 0;
    const next = has ? picked.filter((k) => k !== key) : picked.concat([key]);
    if (onChange) onChange(next);
  }

  function toggleAll() {
    if (disabled) return;
    /* 只要还有没选中的就全选，否则全部清空（与演示页同一判据） */
    const anyOff = options.some((o) => o && picked.indexOf(o.value) < 0 && !o.disabled);
    const next = anyOff ? options.filter((o) => o && !o.disabled).map((o) => o.value) : [];
    if (onChange) onChange(next);
  }

  const allState = chosen.length === 0 ? 'false' : chosen.length === options.length ? 'true' : 'mixed';

  return (
    <div className={cls} role="group" aria-label={label}>
      {selectAll ? (
        <button
          className={
            'kole-m-checkbox kole-m-checkbox--all' +
            (allState === 'true' ? ' is-checked' : '') +
            (allState === 'mixed' ? ' is-indeterminate' : '')
          }
          type="button"
          role="checkbox"
          aria-checked={allState}
          disabled={disabled}
          onClick={toggleAll}
        >
          <span className="kole-m-checkbox__icon" aria-hidden="true" />
          <span className="kole-m-checkbox__label">全选</span>
        </button>
      ) : null}
      {options.map((opt, i) => {
        const item = opt || {};
        const key = item.value !== undefined ? item.value : String(i);
        const checked = picked.indexOf(key) >= 0;
        return (
          <button
            className={
              'kole-m-checkbox' + (button ? ' kole-m-checkbox--button' : '') + (checked ? ' is-checked' : '')
            }
            key={String(key)}
            type="button"
            role="checkbox"
            aria-checked={checked ? 'true' : 'false'}
            aria-disabled={item.disabled || disabled ? 'true' : undefined}
            disabled={!!(item.disabled || disabled)}
            onClick={() => {
              if (item.disabled) return;
              toggle(key);
            }}
          >
            {/* 方框：装饰性（语义由 role="checkbox" + aria-checked 承担） */}
            <span className="kole-m-checkbox__icon" aria-hidden="true" />
            <span className="kole-m-checkbox__label">
              {item.label}
              {item.desc ? <span className="kole-m-checkbox__desc">{item.desc}</span> : null}
            </span>
          </button>
        );
      })}
      {children}
    </div>
  );
}