import React, { useState } from 'react';
import { Button, Checkbox, Drawer } from 'antd';
import { HolderOutlined } from '@ant-design/icons';
import { createDefaultFieldConfig, FIELD_LABELS } from './fieldConfig';

/**
 * 字段配置抽屉：
 * - 勾选控制列显隐
 * - 拖动把手（整行可拖）调整列顺序，表格实时按新顺序渲染
 * - 配置即改即存（localStorage），刷新后保持
 */
const FieldConfigDrawer = ({
  open,
  onClose,
  config,
  onChange,
  fieldLabels = FIELD_LABELS,
  createDefaultConfig = createDefaultFieldConfig,
  tip = '勾选控制列显示，拖动调整列顺序；配置自动保存在本机。',
}) => {
  const [dragIndex, setDragIndex] = useState(null);

  const moveField = (from, to) => {
    if (from === to) return;
    const order = [...config.order];
    const [item] = order.splice(from, 1);
    order.splice(to, 0, item);
    onChange({ ...config, order });
  };

  const toggleField = (key, checked) => {
    const hidden = checked
      ? config.hidden.filter((item) => item !== key)
      : [...config.hidden, key];
    onChange({ ...config, hidden });
  };

  return (
    <Drawer
      title="字段配置"
      width={360}
      open={open}
      onClose={onClose}
      footer={(
        <div className="pricing-calc-field-config__footer">
          <Button onClick={() => onChange(createDefaultConfig())}>恢复默认</Button>
          <Button type="primary" onClick={onClose}>完成</Button>
        </div>
      )}
    >
      <p className="pricing-calc-field-config__tip">
        {tip}
      </p>
      <ul className="pricing-calc-field-config__list">
        {config.order.map((key, index) => {
          const isHidden = config.hidden.includes(key);
          return (
            <li
              key={key}
              className={`pricing-calc-field-config__item${index === dragIndex ? ' is-dragging' : ''}${isHidden ? ' is-off' : ''}`}
              draggable
              onDragStart={(event) => {
                event.dataTransfer.effectAllowed = 'move';
                setDragIndex(index);
              }}
              onDragEnter={() => {
                if (dragIndex !== null && dragIndex !== index) {
                  moveField(dragIndex, index);
                  setDragIndex(index);
                }
              }}
              onDragOver={(event) => event.preventDefault()}
              onDragEnd={() => setDragIndex(null)}
            >
              <HolderOutlined className="pricing-calc-field-config__grip" />
              <Checkbox
                checked={!isHidden}
                onChange={(event) => toggleField(key, event.target.checked)}
              >
                {fieldLabels[key] || key}
              </Checkbox>
            </li>
          );
        })}
      </ul>
    </Drawer>
  );
};

export default FieldConfigDrawer;