import React from 'react';
import { Card, List, Typography } from 'antd';
import {
  FileTextOutlined,
  ShopOutlined,
  EnvironmentOutlined,
  InboxOutlined,
  TableOutlined,
  CarOutlined,
  DollarOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons';

const { Text } = Typography;

interface ModuleLibraryItem {
  type: string;
  name: string;
  icon: React.ReactNode;
  description: string;
}

interface ModuleLibraryProps {
  onModuleAdd: (moduleType: string) => void;
}

const moduleLibrary: ModuleLibraryItem[] = [
  {
    type: 'title',
    name: '发货单标题',
    icon: React.createElement(FileTextOutlined),
    description: '发货单主标题',
  },
  {
    type: 'dealerInfo',
    name: '经销商信息',
    icon: React.createElement(ShopOutlined),
    description: '经销商名称、车次等信息',
  },
  {
    type: 'shippingInfo',
    name: '发货地信息',
    icon: React.createElement(EnvironmentOutlined),
    description: '发货地、日期等信息',
  },
  {
    type: 'weightInfo',
    name: '重量金额信息',
    icon: React.createElement(InboxOutlined),
    description: '毛重、净重、单价、金额',
  },
  {
    type: 'packingSpec',
    name: '装箱规格表格',
    icon: React.createElement(TableOutlined),
    description: '箱号、数量、单价表格',
  },
  {
    type: 'vehicleInfo',
    name: '车辆信息',
    icon: React.createElement(CarOutlined),
    description: '司机、车牌、运费信息',
  },
  {
    type: 'otherFees',
    name: '其他费用明细',
    icon: React.createElement(DollarOutlined),
    description: '商标、人工、纸箱等费用',
  },
  {
    type: 'totalAmount',
    name: '合计金额',
    icon: React.createElement(DollarOutlined),
    description: '总金额显示',
  },
  {
    type: 'otherInfo',
    name: '其他信息',
    icon: React.createElement(InfoCircleOutlined),
    description: '产地、供应商等信息',
  },
];

const ModuleLibrary: React.FC<ModuleLibraryProps> = ({ onModuleAdd }) => {
  return (
    <Card title="模块库" size="small" className="bg-white rounded-lg p-4 h-full">
      <List
        dataSource={moduleLibrary}
        renderItem={(module) => (
          <div
            className="flex items-center p-2 cursor-pointer border border-gray-300 rounded hover:border-blue-500 hover:bg-blue-50 transition-all duration-300 mb-2"
            onClick={() => onModuleAdd(module.type)}
          >
            <div className="text-blue-500 text-lg mr-2">{module.icon}</div>
            <div>
              <div>
                <Text strong>{module.name}</Text>
              </div>
              <div>
                <Text type="secondary" style={{ fontSize: '12px' }}>
                  {module.description}
                </Text>
              </div>
            </div>
          </div>
        )}
      />
    </Card>
  );
};

export default ModuleLibrary;
