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

const { Text } = Typography;

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

const ShippingInfoModule: React.FC<ModuleProps> = ({
	config,
	isSelected,
	onSelect,
	onDelete,
	onMoveUp,
	onMoveDown,
	canMoveUp,
	canMoveDown,
	previewMode = false, // 默认为false
}) => {
	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={'preview grid grid-cols-8 gap-0 w-full text-base'}
			>
				{config.showShippingFrom && (
					<>
						<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.shippingFrom}
						</div>
					</>
				)}
				{config.showDate && (
					<>
						<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.date}
						</div>
					</>
				)}
			</div>
		</div>
	);
};

export default ShippingInfoModule;
