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

/**
 * Kole UI Collapse（React）
 * 对齐 组件2.txt 规范：标题栏高40px、左侧箭头旋转90°、内容分割线、手风琴模式
 *
 * props:
 *  - items    : [{ key, title, disabled? }]
 *  - accordion: Boolean（手风琴模式，同时仅展开一个）
 *  - value / defaultValue : 展开 key 数组（手风琴时为单个 key 字符串）
 *  - onChange(keys)
 *  - renderPanel(key) / children(key) : 返回对应面板内容
 */
export default function Collapse({
  items = [],
  accordion = false,
  value,
  defaultValue = accordion ? '' : [],
  onChange,
  renderPanel
}) {
  const panelFn = renderPanel || (typeof children === 'function' ? children : null);
  const [inner, setInner] = useState(defaultValue);
  const open = value !== undefined ? value : inner;

  const openList = accordion ? (open ? [open] : []) : (Array.isArray(open) ? open : []);
  const isOpen = (k) => openList.includes(k);

  const toggle = (item) => {
    if (item.disabled) return;
    let next;
    if (accordion) {
      next = isOpen(item.key) ? [] : [item.key];
    } else {
      next = isOpen(item.key) ? openList.filter(k => k !== item.key) : [...openList, item.key];
    }
    const result = accordion ? (next[0] || '') : next;
    if (value === undefined) setInner(result);
    onChange && onChange(result);
  };

  return (
    <div className="kole-collapse">
      {items.map((item) => (
        <div
          key={item.key}
          className={`kole-collapse-item${isOpen(item.key) ? ' is-open' : ''}${item.disabled ? ' is-disabled' : ''}`}
        >
          <div className="kole-collapse-header" onClick={() => toggle(item)}>
            <span className="kole-collapse-arrow">▶</span>
            <span className="kole-collapse-title">{item.title}</span>
          </div>
          {isOpen(item.key) && (
            <div className="kole-collapse-content">
              {panelFn ? panelFn(item.key) : null}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

/*
用法示例：
import Collapse from './Collapse';
const items = [
  { key: 'a', title: '基本设置' },
  { key: 'b', title: '通知设置' },
  { key: 'c', title: '高级', disabled: true }
];
<Collapse accordion items={items} defaultValue="a" renderPanel={(k) => <div>内容：{k}</div>} />
*/