import { formatCurrency } from '@/utils/format';
import {
	ArrowDownOutlined,
	ArrowUpOutlined,
	DeleteOutlined,
	MenuOutlined,
} from '@ant-design/icons';
import { Button, Typography } from 'antd';
import classNames from 'classnames';
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 PackingSpecModule: React.FC<ModuleProps> = ({
	config,
	isSelected,
	onSelect,
	onDelete,
	onMoveUp,
	onMoveDown,
	canMoveUp,
	canMoveDown,
	previewMode = false, // 默认为false
}) => {
	// 计算需要显示的列数
	const visibleColumnCount =
		[
			config.showBoxType,
			config.showQuantity,
			config.showUnitPrice,
			config.showAmount,
			config.showUnitWeight,
			config.showWeight,
		].filter(Boolean).length + 1; // +1 是因为"规格："列总是显示
	console.log('visibleColumnCount', visibleColumnCount);

	return (
		<div
			className={classNames('bg-white transition-all duration-200', {
				'border border-black': !previewMode,
				'border-2 border-blue-500 shadow-[0_0_0_2px_rgba(24,144,255,0.2)] rounded p-2 mb-2':
					isSelected && !previewMode,
				'hover:border-blue-300 rounded p-2 mb-2': !isSelected && !previewMode,
			})}
			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>
			)}

			<div
				className={classNames(`grid w-full gap-0 text-base `, {
					'grid-cols-1': visibleColumnCount === 1,
					'grid-cols-2': visibleColumnCount === 2,
					'grid-cols-3': visibleColumnCount === 3,
					'grid-cols-4': visibleColumnCount === 4,
					'grid-cols-5': visibleColumnCount === 5,
					'grid-cols-6': visibleColumnCount === 6,
					'grid-cols-7': visibleColumnCount === 7,
					'grid-cols-8': visibleColumnCount === 8,
				})}
			>
				<div className={`flex items-end justify-center grid-span-1`}>
					规格：
				</div>
			</div>

			<div
				className={classNames(`grid w-full gap-0 text-base `, {
					'grid-cols-1': visibleColumnCount === 1,
					'grid-cols-2': visibleColumnCount === 2,
					'grid-cols-3': visibleColumnCount === 3,
					'grid-cols-4': visibleColumnCount === 4,
					'grid-cols-5': visibleColumnCount === 5,
					'grid-cols-6': visibleColumnCount === 6,
					'grid-cols-7': visibleColumnCount === 7,
					'grid-cols-8': visibleColumnCount === 8,
				})}
			>
				{config.columns.map((column: any, index: number) => {
					if (index === 0) {
						return (
							<div key={'title' + index} className="">
								&nbsp;
							</div>
						);
					}

					if (
						(column.dataIndex === 'boxType' && config.showBoxType) ||
						(column.dataIndex === 'quantity' && config.showQuantity) ||
						(column.dataIndex === 'unitPrice' && config.showUnitPrice) ||
						(column.dataIndex === 'amount' && config.showAmount) ||
						(column.dataIndex === 'unitWeight' && config.showUnitWeight) ||
						(column.dataIndex === 'weight' && config.showWeight)
					) {
						return (
							<div
								key={'title' + index}
								className="flex items-end justify-center"
							>
								{column.title}
							</div>
						);
					}

					return <></>;
				})}
			</div>
			<div className={'table-border'}>
				{config.data?.map((item: any, index: number) => (
					<div
						key={index}
						className={classNames(`grid w-full gap-0 text-base`, {
							'grid-cols-1': visibleColumnCount === 1,
							'grid-cols-2': visibleColumnCount === 2,
							'grid-cols-3': visibleColumnCount === 3,
							'grid-cols-4': visibleColumnCount === 4,
							'grid-cols-5': visibleColumnCount === 5,
							'grid-cols-6': visibleColumnCount === 6,
							'grid-cols-7': visibleColumnCount === 7,
							'grid-cols-8': visibleColumnCount === 8,
							' border-t-0': index > 0,
						})}
					>
						<div className={'flex items-end justify-center'}>
							{item.boxCategory}
						</div>

						<div className={'flex items-end justify-center'}>
							{item.boxType}
						</div>

						{config.showQuantity && (
							<div className={'flex items-end justify-center'}>
								{item.quantity}
							</div>
						)}

						{config.showUnitPrice && (
							<div className={'flex items-end justify-center'}>
								{item.unitPrice}
							</div>
						)}

						{config.showAmount && (
							<div className={'flex items-end justify-center'}>
								{item.amount}
							</div>
						)}

						{config.showUnitWeight && (
							<div className={'flex items-end justify-center'}>
								{item.unitWeight}
							</div>
						)}

						{config.showWeight && (
							<div className={'flex items-end justify-center'}>
								{item.weight}
							</div>
						)}
					</div>
				))}

				<div
					className={classNames(`grid w-full gap-0 text-base `, {
						'grid-cols-1': visibleColumnCount === 1,
						'grid-cols-2': visibleColumnCount === 2,
						'grid-cols-3': visibleColumnCount === 3,
						'grid-cols-4': visibleColumnCount === 4,
						'grid-cols-5': visibleColumnCount === 5,
						'grid-cols-6': visibleColumnCount === 6,
						'grid-cols-7': visibleColumnCount === 7,
						'grid-cols-8': visibleColumnCount === 8,
					})}
				>
					<div className={`flex items-end justify-center col-span-2`}>
						总件数
					</div>
					{config.showQuantity && (
						<div className={`flex items-end justify-center col-span-1`}>
							{config.data?.reduce(
								(acc: any, cur: any) => acc + Number(cur.quantity),
								0,
							)}
						</div>
					)}
					{config.showUnitPrice && (
						<div className={`flex items-end justify-center col-span-1`}></div>
					)}
					{config.showAmount && (
						<div className={`flex items-end justify-center col-span-1`}>
							{formatCurrency(
								config.data?.reduce(
									(acc: any, cur: any) => acc + Number(cur.amount),
									0,
								),
							)}
						</div>
					)}
					{config.showUnitWeight && (
						<div className={`flex items-end justify-center col-span-1`}></div>
					)}
					{config.showWeight && (
						<div className={`flex items-end justify-center col-span-1`}>
							{formatCurrency(
								config.data?.reduce(
									(acc: any, cur: any) => acc + Number(cur.weight),
									0,
								),
							)}
						</div>
					)}
				</div>
			</div>
		</div>
	);
};

export default PackingSpecModule;
