import {
	ArrowDownOutlined,
	ArrowUpOutlined,
	DeleteOutlined,
	MenuOutlined,
} from '@ant-design/icons';
import { Button, Typography } from 'antd';
import React from 'react';

const { Text } = Typography;

interface ModuleProps {
	config: any;
	isSelected: boolean;
	onSelect: () => void;
	onDelete: () => void;
	onMoveUp?: () => void;
	onMoveDown?: () => void;
	canMoveUp?: boolean;
	canMoveDown?: boolean;
	previewMode?: boolean; // 添加预览模式属性
}

const WeightInfoModule: React.FC<ModuleProps> = ({
	config,
	isSelected,
	onSelect,
	onDelete,
	onMoveUp,
	onMoveDown,
	canMoveUp,
	canMoveDown,
	previewMode = false, // 默认为false
}) => {
	return (
		<div
			className={`${previewMode ? '' : 'border border-gray-300'} rounded p-2 mb-2 bg-white transition-all duration-200 ${
				isSelected && !previewMode
					? 'border-2 border-blue-500 shadow-[0_0_0_2px_rgba(24,144,255,0.2)]'
					: 'hover:border-blue-300'
			}`}
			onClick={previewMode ? undefined : onSelect}
		>
			{!previewMode && (
				<div className="flex justify-between items-center mb-2 pb-2 border-b border-gray-100">
					<Text strong>重量金额信息模块</Text>
					<div className="flex gap-1">
						<Button
							type="text"
							icon={<MenuOutlined />}
							size="small"
							style={{ cursor: 'move' }}
						/>
						<Button
							type="text"
							icon={<ArrowUpOutlined />}
							onClick={(e) => {
								e.stopPropagation();
								if (onMoveUp) onMoveUp();
							}}
							size="small"
							disabled={!canMoveUp}
						/>
						<Button
							type="text"
							icon={<ArrowDownOutlined />}
							onClick={(e) => {
								e.stopPropagation();
								if (onMoveDown) onMoveDown();
							}}
							size="small"
							disabled={!canMoveDown}
						/>
						<Button
							type="text"
							icon={<DeleteOutlined />}
							onClick={(e) => {
								e.stopPropagation();
								onDelete();
							}}
							danger
							size="small"
						/>
					</div>
				</div>
			)}

			{config.data?.map((item: any, index: number) => {
				return (
					<div
						key={'data' + index}
						className={'preview grid grid-cols-2 gap-0 w-full text-base'}
					>
						{config.showNetWeight && (
							<div className={'col-span-1 grid grid-cols-4'}>
								<div className="col-span-1 flex items-end justify-center">
									净重:
								</div>
								<div className="col-span-2 border-b border-black flex items-end justify-center">
									{item.netWeight}
								</div>
								<div className="col-span-1 border-b border-black flex items-end justify-center">
									{config.netWeightUnit === '1' ? '斤' : '公斤'}
								</div>
							</div>
						)}
						{config.showBoxWeight && (
							<div className={'col-span-1 grid grid-cols-4'}>
								<div className="col-span-1 flex items-end justify-center">
									箱重:
								</div>
								<div className="col-span-2 border-b border-black flex items-end justify-center">
									{item.boxWeight}
								</div>
								<div className="col-span-1 border-b border-black flex items-end justify-center">
									{config.boxWeightUnit === '1' ? '斤' : '公斤'}
								</div>
							</div>
						)}
						{config.showGrossWeight && (
							<div className={'col-span-1 grid grid-cols-4'}>
								<div className="col-span-1 flex items-end justify-center">
									毛重:
								</div>
								<div className="col-span-2 border-b border-black flex items-end justify-center">
									{item.grossWeight}
								</div>
								<div className="col-span-1 border-b border-black flex items-end justify-center">
									{config.grossWeightUnit === '1' ? '斤' : '公斤'}
								</div>
							</div>
						)}
						{config.showUnitPrice && (
							<div className={'col-span-1 grid grid-cols-4'}>
								<div className="col-span-1 flex items-end justify-center">
									单价:
								</div>
								<div className="col-span-2 border-b border-black flex items-end justify-center">
									{item.unitPrice}
								</div>
								<div className="col-span-1 border-b border-black flex items-end justify-center">
									{config.unitPriceUnit === '1' ? '元/斤' : '元/公斤'}
								</div>
							</div>
						)}
						{config.showAmount && (
							<div className={'col-span-1 grid grid-cols-4'}>
								<div className="col-span-1 flex items-end justify-center">
									金额:
								</div>
								<div className="col-span-2 border-b border-black flex items-end justify-center">
									{item.amount}
								</div>
								<div className="col-span-1 border-b border-black flex items-end justify-center">
									元
								</div>
							</div>
						)}
						{config.showGrade && (
							<div className={'col-span-1 grid grid-cols-4'}>
								<div className="col-span-1 flex items-end justify-center">
									品级:
								</div>
								<div className="col-span-3 border-b border-black flex items-end justify-center">
									{item.grade}
								</div>
							</div>
						)}
					</div>
				);
			})}
			<div className={'preview grid grid-cols-2 gap-0 w-full text-base'}>
				{config.showAccountCompany && (
					<div className={'col-span-1 grid grid-cols-4'}>
						<div className="col-span-1 flex items-end justify-center">
							入账公司:
						</div>
						<div className="col-span-3 border-b border-black flex items-end justify-center">
							{config.accountCompany}
						</div>
					</div>
				)}
				{config.showSumAmount && (
					<div className={'col-span-1 grid grid-cols-4'}>
						<div className="col-span-1 flex items-end justify-center">
							总计:
						</div>
						<div className="col-span-2 border-b border-black flex items-end justify-center">
							{config.sumAmount}
						</div>
						<div className="col-span-1 border-b border-black flex items-end justify-center">
							元
						</div>
					</div>
				)}
			</div>
		</div>
	);
};

export default WeightInfoModule;