/**
 * 画布中的字段项
 * 支持拖拽排序、选中、删除
 */

import React from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Button, Space, Tooltip } from 'antd';
import { HolderOutlined, DeleteOutlined, CopyOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import type { FieldConfig } from '../types';
import FieldRenderer from './FieldRenderer';
import '../styles.css';

interface FieldItemProps {
  field: FieldConfig;
  isSelected: boolean;
  onSelect: () => void;
  onCopy: () => void;
  onDelete: () => void;
  selectedFieldId?: string; // 传递给栅格内部字段
  onSelectField?: (fieldId: string) => void;
  onCopyField?: (fieldId: string) => void;
  onPasteToGrid?: (gridId: string, colIndex: number) => void;
  onDeleteField?: (fieldId: string) => void;
  labelAlign?: 'left' | 'right' | 'top'; // 标签对齐方式
  hasClipboard?: boolean;
  hasDuplicateName?: boolean; // 是否字段名冲突
}

const FieldItem: React.FC<FieldItemProps> = ({
  field,
  isSelected,
  onSelect,
  onCopy,
  onDelete,
  selectedFieldId,
  onSelectField,
  onCopyField,
  onPasteToGrid,
  onDeleteField,
  labelAlign = 'right',
  hasClipboard = false,
  hasDuplicateName = false,
}) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id: field.id,
    data: {
      accept: 'field',
    },
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`form-designer-field-item ${isSelected ? 'selected' : ''} ${hasDuplicateName ? 'duplicate-name' : ''}`}
      onClick={onSelect}
    >
      <div className="form-designer-field-drag-handle" {...attributes} {...listeners}>
        <HolderOutlined />
      </div>

      {/* 冲突警告图标 */}
      {hasDuplicateName && (
        <Tooltip title="字段名称与其他字段重复">
          <ExclamationCircleOutlined 
            style={{ 
              position: 'absolute', 
              top: 8, 
              left: 35, 
              color: '#ff4d4f', 
              fontSize: 16,
              zIndex: 10,
            }} 
          />
        </Tooltip>
      )}

      <div className="form-designer-field-content">
        <FieldRenderer 
          field={field}
          selectedFieldId={selectedFieldId}
          onSelectField={onSelectField}
          onCopyField={onCopyField}
          onPasteToGrid={onPasteToGrid}
          onDeleteField={onDeleteField}
          labelAlign={labelAlign}
          hasClipboard={hasClipboard}
        />
      </div>

      <div className="form-designer-field-actions">
        <Space size="small">
          <Button
            type="text"
            size="small"
            icon={<CopyOutlined />}
            onClick={(e) => {
              e.stopPropagation();
              onCopy();
            }}
          />
          <Button
            type="text"
            size="small"
            danger
            icon={<DeleteOutlined />}
            onClick={(e) => {
              e.stopPropagation();
              onDelete();
            }}
          />
        </Space>
      </div>
    </div>
  );
};

export default FieldItem;

