import {
	BizContainer,
	BizValueType,
	BoxSpecList,
	MaterialList,
	ModeType,
} from '@/components';
import { business } from '@/services';
import { formatParam } from '@/utils/formatParam';
import { useIntl } from '@@/exports';
import {
	ActionType,
	ProColumns,
	ProFormText,
} from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import { ProListMetas } from '@ant-design/pro-list';
import {
	ProFormBizSelect,
	ProFormBizSelectHandles,
	ProFormUploadMaterial,
} from '@chageable/components';
import { Image } from 'antd';
import React, { useRef } from 'react';

interface IBoxBrandListProps {
	ghost?: boolean;
	brandId?: BusinessAPI.BoxBrandVO['brandId'];
	search?: boolean;
	onValueChange?: () => void;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
	onSelect?: (value: BusinessAPI.BoxBrandVO) => void;
	brandType?: BusinessAPI.BoxBrandVO['type'] | 'ALL';
}
export default function BoxBrandList(props: IBoxBrandListProps) {
	const {
		ghost = false,
		brandId,
		search = true,
		mode = 'page',
		trigger,
		onValueChange,
		onSelect,
		brandType = 'ALL',
	} = props;

	const intl = useIntl();
	const intlPrefix = 'boxBrand';
	const specRef = useRef<ProFormBizSelectHandles>(null);
	const actionRef = useRef<ActionType>();

	const columns: ProColumns<BusinessAPI.BoxBrandVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.image' }),
			dataIndex: 'image',
			key: 'image',
			render: (_, boxBrand) => (
				<Image width={80} alt={boxBrand.name} src={boxBrand.image} />
			),
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.name' }),
			dataIndex: 'name',
			key: 'name',
			render: (_, boxBrand) => (
				<a
					className="font-medium"
					onClick={async (e) => {
						const { data } = await business.boxBrand.showBoxBrand({
							boxBrandShowQry: {
								brandId: boxBrand.brandId,
							},
						});
						if (data) {
							onSelect?.(data);
						}
						e.stopPropagation();
					}}
				>
					{boxBrand.name}
				</a>
			),
		},
	];

	const metas: ProListMetas<BusinessAPI.BoxBrandVO> = {
		title: {
			dataIndex: 'name',
		},
		subTitle: {
			dataIndex: 'description',
		},
		avatar: {
			dataIndex: 'image',
			valueType: 'image',
			render: (_, boxBrand) => (
				<Image width={80} alt={boxBrand.name} src={boxBrand.image} />
			),
		},
	};

	const formContext = [
		<ProFormText key={'type'} hidden={true} name={'type'} />,
		<ProFormText
			key={'name'}
			name={'name'}
			label={intl.formatMessage({ id: intlPrefix + '.form.name.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.name.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.name.required',
					}),
				},
			]}
		/>,

		<ProFormUploadMaterial
			key={'image'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.image.label',
			})}
			name={'imageList'}
			transform={(value) => {
				return {
					imageList: value,
					image: value[0],
				};
			}}
			fieldProps={{
				maxCount: 1,
				actionRef: actionRef,
				toolBarRender: () => [
					<MaterialList
						key={'create'}
						ghost={true}
						mode={'create'}
						search={false}
						onValueChange={() => actionRef.current?.reload()}
					/>,
				],
				request: async (params, sorter, filter) => {
					const { data, success, totalCount } =
						await business.material.pageMaterial({
							materialPageQry: formatParam<typeof params>(
								params,
								sorter,
								filter,
							),
						});

					return {
						data: data || [],
						total: totalCount,
						success,
					};
				},
			}}
		/>,

		<ProFormBizSelect
			name={'specIds'}
			key={'specIds'}
			ref={specRef}
			label={intl.formatMessage({
				id: intlPrefix + '.form.specIds.label',
			})}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.specIds.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.specIds.required',
					}),
				},
			]}
			params={{
				status: true,
			}}
			fetchOptions={async (params) => {
				const { data } = await business.boxSpec.listBoxSpec({
					boxSpecListQry: {
						...params,
					},
				});

				return (
					data?.map((item) => ({
						label: item.name,
						value: item.specId,
					})) || []
				);
			}}
			fieldProps={{
				mode: 'multiple',
				fetchDataOnSearch: false,
				showSearch: true,
				autoClearSearchValue: true,
			}}
			addonAfter={
				<BoxSpecList
					ghost={true}
					search={false}
					mode={'create'}
					onValueChange={async () => specRef.current?.reload()}
				/>
			}
		/>,
	];

	const detailColumns: ProDescriptionsItemProps<
		BusinessAPI.BoxBrandVO,
		BizValueType
	>[] = columns as ProDescriptionsItemProps<
		BusinessAPI.BoxBrandVO,
		BizValueType
	>[];

	return (
		<BizContainer<
			typeof business.boxBrand,
			BusinessAPI.BoxBrandVO,
			BusinessAPI.BoxBrandPageQry,
			BusinessAPI.BoxBrandCreateCmd,
			BusinessAPI.BoxBrandUpdateCmd
		>
			rowKey={'brandId'}
			permission={'operation-box-brand'}
			func={business.boxBrand}
			method={'boxBrand'}
			methodUpper={'BoxBrand'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{
				ghost,
			}}
			remark={{
				mode: 'editor',
			}}
			status
			drag={{
				fieldProps: {
					bordered: true,
					//@ts-ignore
					search,
					params: {
						...(brandType !== 'ALL' && {
							type: brandType,
						}),
					},
					columnsState: {
						defaultValue: {
							option: { show: true },
							status: { show: true },
							remark: { show: false },
							createdAt: { show: false },
						},
					},
				},
				columns,
			}}
			list={{
				fieldProps: {
					bordered: true,
					//@ts-ignore
					search,
					pagination: false,
					itemLayout: 'vertical',
					showActions: 'hover',
					params: {
						...(brandType !== 'ALL' && {
							type: brandType,
						}),
					},
					onItem: (record: any) => {
						return {
							onClick: async (e) => {
								const { data } = await business.boxBrand.showBoxBrand({
									boxBrandShowQry: {
										brandId: record.brandId,
									},
								});
								if (data) {
									onSelect?.(data);
								}
								e.stopPropagation();
							},
						};
					},
				},
				metas,
				columns,
			}}
			create={{
				formType: 'drawer',
				formContext,
				initValues: {
					status: true,
					type: brandType,
				},
			}}
			update={{
				formType: 'drawer',
				formContext,
			}}
			destroy={{}}
			detail={{
				rowId: brandId,
				formType: 'drawer',
				columns: detailColumns,
				trigger,
			}}
		/>
	);
}
