import { createStyles } from 'antd-style';

const useStyle = () => {
	return createStyles(() => {
		return {
			// ==================== Modal 布局 ====================
			materialModal: {
				'.ant-modal-body': {
					padding: 0,
				},
			},
			modalContent: {
				display: 'flex',
				height: 600,
			},
			leftPanel: {
				width: 280,
				borderRight: '1px solid #f0f0f0',
				padding: 16,
				overflow: 'auto',
			},
			rightPanel: {
				flex: 1,
				display: 'flex',
				flexDirection: 'column',
				overflow: 'hidden',
			},

			// ==================== 工具栏 ====================
			toolbar: {
				display: 'flex',
				justifyContent: 'space-between',
				alignItems: 'center',
				padding: '12px 16px',
				borderBottom: '1px solid #f0f0f0',
			},
			toolbarLeft: {
				display: 'flex',
				alignItems: 'center',
				gap: 16,
			},
			toolbarRight: {
				display: 'flex',
				alignItems: 'center',
				gap: 12,
			},
			currentCategory: {
				color: '#666',
				fontSize: 13,
			},
			selectedCount: {
				color: '#1890ff',
				fontWeight: 500,
			},

			// ==================== 分类菜单 ====================
			categoryCard: {
				height: '100%',
			},
			cardHeader: {
				display: 'flex',
				justifyContent: 'space-between',
				alignItems: 'center',
			},
			categoryMenu: {
				borderRight: 'none',
				'.ant-menu-item': {
					paddingLeft: '8px !important',
					height: 'auto',
					lineHeight: 'normal',
					paddingTop: 8,
					paddingBottom: 8,
					margin: 0,
				},
				'.ant-menu-submenu': {
					paddingLeft: '8px !important',
				},
				'.ant-menu-submenu-title': {
					paddingLeft: '8px !important',
					height: 'auto',
					lineHeight: 'normal',
					paddingTop: 8,
					paddingBottom: 8,
					margin: 0,
				},
				'.ant-menu-item-selected': {
					backgroundColor: '#e6f7ff',
				},
				'.ant-menu-item:hover': {
					backgroundColor: 'rgba(0, 0, 0, 4%)',
				},
				'.ant-menu-submenu-title:hover': {
					backgroundColor: 'rgba(0, 0, 0, 4%)',
				},
			},
			menuItemLabel: {
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'space-between',
				flex: 1,
				marginLeft: 8,
			},
			categoryName: {
				flex: 1,
				overflow: 'hidden',
				textOverflow: 'ellipsis',
				whiteSpace: 'nowrap',
			},
			materialCount: {
				color: '#999',
				fontSize: 12,
				flexShrink: 0,
				marginLeft: 8,
			},

			// ==================== 素材列表 ====================
			materialArea: {
				flex: 1,
				overflow: 'auto',
				padding: 16,
			},
			materialTable: {
				'.ant-table-row': {
					cursor: 'pointer',
				},
				border: '1px solid #f0f0f0;',
				borderRadius: 8,
			},
			rowSelected: {
				backgroundColor: '#e6f7ff !important',
			},

			// ==================== 图片预览 ====================
			imageGridWrapper: {
				height: '100%',
				display: 'flex',
				flexDirection: 'column',
			},
			imagePreview: {
				display: 'flex',
				flexWrap: 'wrap',
				gap: 12,
				overflow: 'auto',
				padding: '4px 0',
				// flex: 1,
			},
			imageItem: {
				width: 120,
				border: '1px solid #f0f0f0',
				borderRadius: 8,
				overflow: 'hidden',
				cursor: 'pointer',
				transition: 'all 0.2s',
				position: 'relative',
				'&:hover': {
					borderColor: '#1890ff',
					boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
				},
			},
			imageItemSelected: {
				borderColor: '#1890ff',
				boxShadow: '0 0 0 2px rgba(24, 144, 255, 0.3)',
			},
			imageWrapper: {
				width: '100%',
				height: 100,
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'center',
				backgroundColor: '#fafafa',
				img: {
					maxWidth: '100%',
					maxHeight: '100%',
					objectFit: 'contain',
				},
			},
			imagePlaceholder: {
				color: '#999',
				fontSize: 12,
			},
			imageInfo: {
				padding: '8px 10px',
				backgroundColor: '#fff',
			},
			imageName: {
				fontSize: 12,
				overflow: 'hidden',
				textOverflow: 'ellipsis',
				whiteSpace: 'nowrap',
				color: '#333',
			},
			imageSelectedCheck: {
				position: 'absolute',
				top: 4,
				right: 4,
				width: 20,
				height: 20,
				borderRadius: '50%',
				backgroundColor: '#1890ff',
				color: '#fff',
				fontSize: 12,
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'center',
			},
			paginationWrapper: {
				borderTop: '1px solid #f0f0f0',
				marginTop: 8,
				'.ant-table': {
					display: 'none',
				},
			},
			emptyTip: {
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'center',
				height: '100%',
				color: '#999',
			},
		};
	})();
};

export default useStyle;
