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

/* 颜色选择器（移动端）— 规格 §45。
   预设色板 + 当前色显示；点色块即回传该色（onChange），同组互斥。
   色值是**数据**：写在 data-color 与 `--kole-m-colorpicker-swatch` 行内自定义属性上 ——
   组件样式表里不出现任何 hex（浅色/深色主题下色板自身不随主题变，因为颜色就是要选的内容）。
   选中态是「外环 + 放大」而不是换色，浅色块上也能读出来（规格 §45.4）。
   mode=custom 时追加自定义色值输入（由宿主以 children 传入，外层自备 .kole-m-colorpicker__custom）；
   本端不做 #RRGGBB 之外的解析 —— 不发明颜色空间转换与自动纠正（规格 §45.7）。 */

/* presets 项可以是字符串，也可以是 { value, label } 对象 */
function colorOf(item, i) {
  if (item === null || item === undefined) return '';
  if (typeof item === 'object') return String(item.value === undefined ? '' : item.value);
  return String(item);
}

function nameOf(item, i) {
  if (item && typeof item === 'object' && item.label) return String(item.label);
  return colorOf(item, i);
}

export default function ColorPicker({
  mode = 'swatch',
  round = false,
  showValue = true,
  disabled = false,
  value = '',
  presets = [],
  columns = 6,
  label = '颜色',
  onChange,
  children = null,
}) {
  const current = String(value || '');

  const cls =
    'kole-m-colorpicker' +
    ` kole-m-colorpicker--${mode === 'custom' ? 'custom' : 'swatch'}` +
    (round ? ' kole-m-colorpicker--round' : '') +
    (showValue ? '' : ' kole-m-colorpicker--no-value') +
    (disabled ? ' is-disabled' : '');

  /* 当前色用行内自定义属性传给样式表（样式表里没有 hex） */
  const style = { '--kole-m-colorpicker-current': current || 'transparent' };
  const gridStyle = { '--kole-m-colorpicker-columns': String(columns) };

  function pick(color) {
    if (disabled) return;
    if (!onChange) return;
    onChange(color);
  }

  return (
    <div className={cls} style={style} aria-label={label} data-value={current}>
      <div className="kole-m-colorpicker__current">
        <span className="kole-m-colorpicker__dot" aria-hidden="true" />
        {showValue ? <span className="kole-m-colorpicker__value">{current || '—'}</span> : null}
      </div>
      <div className="kole-m-colorpicker__swatches" role="radiogroup" aria-label={label} style={gridStyle}>
        {presets.map((item, i) => {
          const color = colorOf(item, i);
          const on = color.toUpperCase() === current.toUpperCase();
          return (
            <button
              className={'kole-m-colorpicker__swatch' + (on ? ' is-selected' : '')}
              key={color + i}
              type="button"
              role="radio"
              aria-checked={on ? 'true' : 'false'}
              aria-label={nameOf(item, i)}
              aria-disabled={disabled ? 'true' : undefined}
              disabled={disabled}
              data-color={color}
              style={{ '--kole-m-colorpicker-swatch': color }}
              onClick={() => pick(color)}
            />
          );
        })}
      </div>
      {mode === 'custom' ? <div className="kole-m-colorpicker__custom">{children}</div> : children}
    </div>
  );
}