import { IconFont } from '@/components';
import { ProFormDependency, ProFormSelect } from '@ant-design/pro-components';
import { Button, Input, List, Modal, Space, Typography } from 'antd';
import { useMemo, useState } from 'react';

const { Search } = Input;
const { Text } = Typography;

// 常用图标列表
const COMMON_ICONS = [
	'icon-phone-flip',
	'icon-eye',
	'icon-eye-slash',
	'icon-address-book',
	'icon-pen-to-square',
	'icon-print',
	'icon-rotate-left',
	'icon-clock',
	'icon-location-dot',
	'icon-user-tie',
	'icon-receipt',
	'icon-file-signature',
	'icon-chart-line',
	'icon-chart-pie',
	'icon-right-left',
	'icon-chart-bar',
	'icon-bell',
	'icon-circle-check',
	'icon-key',
	'icon-circle-question',
	'icon-user-switch',
	'icon-arrow-right-from-bracket',
	'icon-gear',
	'icon-house',
	'icon-check',
	'icon-comment-dots',
	'icon-circle-xmark',
	'icon-phone',
	'icon-weight-scale',
	'icon-minus',
	'icon-clipboard-list',
	'icon-folder',
	'icon-file-invoice',
	'icon-camera',
	'icon-id-card',
	'icon-truck',
	'icon-credit-card',
	'icon-lock',
	'icon-money-bill',
	'icon-chevron-right',
	'icon-circle-info',
	'icon-user',
	'icon-chevron-down',
	'icon-plus',
	'icon-chevron-left',
];

const IconPicker = (props: any) => {
	const [open, setOpen] = useState(false);
	const [searchValue, setSearchValue] = useState('');

	const filteredIcons = useMemo(() => {
		if (!searchValue) return COMMON_ICONS;
		return COMMON_ICONS.filter((icon) =>
			icon.toLowerCase().includes(searchValue.toLowerCase()),
		);
	}, [searchValue]);

	return (
		<ProFormDependency name={[props.name]}>
			{(data, form) => {
				const value = data[props.name];
				return (
					<>
						<ProFormSelect
							{...props}
							readonly
							fieldProps={{
								...props.fieldProps,
								value: value,
								onClick: () => setOpen(true),
								prefix: value ? <IconFont type={value} /> : undefined,
							}}
							addonAfter={
								<Button type={'link'} onClick={() => setOpen(true)}>
									{value ? <IconFont type={value} /> : '选择图标'}
								</Button>
							}
						/>

						<Modal
							title="选择图标"
							open={open}
							onCancel={() => setOpen(false)}
							onOk={() => setOpen(false)}
							width={600}
						>
							<Space direction="vertical" style={{ width: '100%' }}>
								<Search
									placeholder="搜索图标"
									value={searchValue}
									onChange={(e) => setSearchValue(e.target.value)}
									style={{ marginBottom: 16 }}
								/>
								<div style={{ maxHeight: 400, overflow: 'auto' }}>
									<List
										grid={{ column: 6 }}
										dataSource={filteredIcons}
										renderItem={(iconType) => (
											<List.Item>
												<div
													style={{
														textAlign: 'center',
														cursor: 'pointer',
														padding: 8,
														borderRadius: 4,
														backgroundColor:
															value === iconType ? '#e6f4ff' : 'transparent',
													}}
													onClick={() => {
														form.setFieldValue(props.name, iconType);
														setOpen(false);
													}}
												>
													<div style={{ fontSize: 24, marginBottom: 8 }}>
														<IconFont type={iconType} />
													</div>
													<Text
														style={{ fontSize: 12 }}
														ellipsis={{ tooltip: iconType }}
													>
														{iconType}
													</Text>
												</div>
											</List.Item>
										)}
									/>
								</div>
							</Space>
						</Modal>
					</>
				);
			}}
		</ProFormDependency>
	);
};

export default IconPicker;
