/**
 * 左侧组件面板
 * 显示可拖拽的表单组件列表
 */

import React from 'react';
import { useDraggable } from '@dnd-kit/core';
import { CSS } from '@dnd-kit/utilities';
import { Collapse, Typography } from 'antd';
import type { ComponentMeta } from '../config';
import { getComponentsByCategory } from '../config';
import '../styles.css';

const { Panel } = Collapse;
const { Text } = Typography;

// 可拖拽组件项
const DraggableComponent: React.FC<{ component: ComponentMeta }> = ({ component }) => {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: `new-${component.type}`,
    data: {
      type: component.type,
      isNew: true,
    },
  });

  const style = {
    transform: CSS.Translate.toString(transform),
    cursor: 'move',
  };

  const Icon = component.icon;

  return (
    <div
      ref={setNodeRef}
      style={style}
      {...listeners}
      {...attributes}
      className="form-designer-component-item"
    >
      <Icon style={{ marginRight: 8, fontSize: 16 }} />
      <Text>{component.label}</Text>
    </div>
  );
};

// 组件面板
const ComponentPanel: React.FC = () => {
  const componentsByCategory = getComponentsByCategory();

  // 定义分类显示顺序
  const categoryOrder = ['布局字段', '基础字段', '高级字段'];

  return (
    <div className="form-designer-component-panel">
      <div className="form-designer-component-panel-header">
        <Text strong>组件列表</Text>
      </div>
      
      <Collapse 
        defaultActiveKey={['基础字段', '高级字段', '布局字段']} 
        ghost
        bordered={false}
      >
        {categoryOrder.map((category) => {
          const components = componentsByCategory[category];
          if (!components || components.length === 0) return null;
          
          return (
            <Panel header={category} key={category}>
              <div className="form-designer-component-list">
                {components.map((component) => (
                  <DraggableComponent key={component.type} component={component} />
                ))}
              </div>
            </Panel>
          );
        })}
      </Collapse>
    </div>
  );
};

export default ComponentPanel;