import React, { useRef, useState } from 'react';
import './Picker.css';

/* 选择器（移动端）— 规格 §43。
   底部浮层 = 装饰性遮罩（aria-hidden）+ 面板；遮罩点击关闭，closeOnMask=false 时不关（规格 §43.5）。
   面板 role="dialog" + aria-modal="true"，标题元素 id 由 aria-labelledby 指向（规格 §43.6）。
   每列 role="listbox"、选项 role="option" + aria-selected；选中项的 is-selected 与 aria-selected 同步。
   mode=single 一列、mode=multiple 多列（各列独立选中，联动与否由宿主给定的选项决定）。
   本端不发明选择事件（契约只有 confirm / close）：点选只改本地高亮，确认时由宿主读 confirm 后的语义。 */

/* 面板标题元素 id：同页多实例不撞号（不依赖 React 版本特性，模块级自增即可） */
let seq = 0;

/* 选项可能是字符串，也可能是 { label, value, disabled } 对象（规格 §43.7 只允许宿主提供） */
function labelOf(option) {
  if (option === null || option === undefined) return '';
  return typeof option === 'object' ? String(option.label === undefined ? '' : option.label) : String(option);
}

function disabledOf(option) {
  return !!(option && typeof option === 'object' && option.disabled);
}

/* 选中判据：选项是对象时比 value，否则比文本（与演示页同一口径） */
function sameValue(option, picked) {
  if (picked === undefined || picked === null || picked === '') return false;
  var value = option && typeof option === 'object' ? option.value : option;
  return String(value) === String(picked);
}

/* mode=single → 取 columns 第一列；mode=multiple → 全部列（规格 §43.3） */
function columnsOf(mode, columns) {
  var list = Array.isArray(columns) ? columns : [];
  return mode === 'single' ? list.slice(0, 1) : list;
}

export default function Picker({
  mode = 'single',
  round = false,
  open = false,
  closeOnMask = true,
  value = [],
  columns = [],
  disabled = false,
  title = '',
  onConfirm,
  onClose,
  children = null,
}) {
  const idRef = useRef(null);
  if (idRef.current === null) {
    seq += 1;
    idRef.current = 'kole-m-picker-title-' + seq;
  }
  const titleId = idRef.current;

  /* null = 跟随 value 属性；点选后本地记账，确认前不改宿主的值 */
  const [draft, setDraft] = useState(null);
  const picked = draft || (Array.isArray(value) ? value : []);
  const cols = columnsOf(mode, columns);

  const panelLabel = title || '选择';
  const label = panelLabel + (picked.length ? '：' + picked.join(' ') : '');

  function select(colIndex, option) {
    if (disabled || disabledOf(option)) return;
    const next = picked.slice();
    next[colIndex] = String(option && typeof option === 'object' ? option.value : option);
    setDraft(next);
  }

  return (
    <>
      {children}
      <div
        className={'kole-m-picker__mask' + (open ? ' is-open' : '')}
        aria-hidden="true"
        onClick={() => {
          if (closeOnMask && onClose) onClose();
        }}
      />
      <div
        className={
          'kole-m-picker kole-m-picker--' + (mode === 'multiple' ? 'multiple' : 'single') +
          (round ? ' kole-m-picker--round' : '') +
          (open ? ' is-open' : '') +
          (disabled ? ' is-disabled' : '')
        }
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        aria-hidden={open ? undefined : 'true'}
      >
        <div className="kole-m-picker__header">
          <button
            className="kole-m-picker__btn"
            type="button"
            onClick={() => {
              if (onClose) onClose();
            }}
          >
            取消
          </button>
          <span className="kole-m-picker__title" id={titleId}>
            {label}
          </span>
          <button
            className="kole-m-picker__btn kole-m-picker__btn--confirm"
            type="button"
            onClick={() => {
              if (!disabled && onConfirm) onConfirm(picked);
            }}
          >
            确定
          </button>
        </div>
        <div className="kole-m-picker__columns">
          {cols.map((col, ci) => (
            <ul className="kole-m-picker__column" role="listbox" aria-label={col.label} key={col.key || ci}>
              {(col.options || []).map((option, i) => {
                const selected = sameValue(option, picked[ci]);
                const off = disabled || disabledOf(option);
                return (
                  <li
                    className={
                      'kole-m-picker__option' + (selected ? ' is-selected' : '') + (off ? ' is-disabled' : '')
                    }
                    role="option"
                    aria-selected={selected ? 'true' : 'false'}
                    aria-disabled={off ? 'true' : undefined}
                    key={labelOf(option) + i}
                    onClick={() => select(ci, option)}
                  >
                    {labelOf(option)}
                  </li>
                );
              })}
            </ul>
          ))}
        </div>
      </div>
    </>
  );
}