import { BizContainer, BizValueType, ModeType } from '@/components';
import { business } from '@/services';
import { useIntl } from '@@/exports';
import {
	ProColumns,
	ProFormRadio,
	ProFormText,
	ProFormTreeSelect,
} from '@ant-design/pro-components';
import { TreeSelect } from 'antd';
import React from 'react';

export interface IMaterialCategoryListProps {
	ghost?: boolean;
	search?: boolean;
	type?: string;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
	onValueChange?: () => void;
}

export default function MaterialCategoryList(
	props: IMaterialCategoryListProps,
) {
	const {
		ghost = false,
		search = true,
		mode = 'tree',
		type,
		trigger,
		onValueChange,
	} = props;
	const intl = useIntl();
	const intlPrefix = 'materialCategory';

	const formContext = [
		<ProFormRadio.Group
			key="type"
			label={intl.formatMessage({ id: intlPrefix + '.form.type.label' })}
			name={'type'}
			required={true}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.type.required',
					}),
				},
			]}
			options={[
				{
					label: intl.formatMessage({
						id: intlPrefix + '.form.type.enum.image',
					}),
					value: 'FILE_IMAGE',
				},
				{
					label: intl.formatMessage({
						id: intlPrefix + '.form.type.enum.video',
					}),
					value: 'FILE_VIDEO',
				},
			]}
		/>,
		<ProFormTreeSelect
			key="pid"
			label={intl.formatMessage({ id: intlPrefix + '.form.pid.label' })}
			required={false}
			name={'pid'}
			request={async (params) => {
				const { data } = await business.materialCategory.treeMaterialCategory({
					categoryTreeQry: {
						...params,
					},
				});
				return data || [];
			}}
			dependencies={['type']}
			fieldProps={{
				showSearch: true,
				allowClear: true,
				autoClearSearchValue: true,
				filterTreeNode: true,
				multiple: false,
				treeNodeFilterProp: 'name',
				showCheckedStrategy: TreeSelect.SHOW_ALL,
				fieldNames: {
					label: 'name',
					children: 'children',
					value: 'categoryId',
				},
				placeholder: intl.formatMessage({
					id: intlPrefix + '.form.pid.placeholder',
				}),
			}}
		/>,
		<ProFormText
			key="name"
			name="name"
			label={intl.formatMessage({ id: intlPrefix + '.form.name.label' })}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.name.placeholder',
			})}
			required={true}
			fieldProps={{
				showCount: true,
				maxLength: 50,
			}}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.name.required',
					}),
				},
			]}
		/>,
	];

	const columns: ProColumns<BusinessAPI.CategoryVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.name' }),
			dataIndex: 'name',
			valueType: 'text',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.type' }),
			dataIndex: 'type',
			valueType: 'select',
			valueEnum: {
				FILE_IMAGE: {
					text: intl.formatMessage({
						id: intlPrefix + '.column.type.enum.image',
					}),
				},
				FILE_VIDEO: {
					text: intl.formatMessage({
						id: intlPrefix + '.column.type.enum.video',
					}),
				},
			},
			fieldProps: {
				showSearch: true,
				allowClear: true,
				autoClearSearchValue: true,
			},
		},
	];

	return (
		<BizContainer<
			typeof business.materialCategory,
			BusinessAPI.CategoryVO,
			BusinessAPI.CategoryTreeQry,
			BusinessAPI.CategoryCreateCmd,
			BusinessAPI.CategoryUpdateCmd
		>
			rowKey={'categoryId'}
			permission={'operation-material-category'}
			func={business.materialCategory}
			method={'category'}
			methodUpper={'MaterialCategory'}
			intlPrefix={intlPrefix}
			onValueChange={onValueChange}
			modeType={mode}
			container={{
				ghost,
			}}
			tree={{
				fieldProps: {
					ghost,
					//@ts-ignore
					search,
					params: {
						// @ts-ignore
						typeList: ['FILE_IMAGE', 'FILE_VIDEO', 'SPEECH'],
					},
				},
				columns,
			}}
			create={{
				formType: 'drawer',
				formContext,
				trigger,
				initValues: {
					type: type,
				},
			}}
			update={{
				formType: 'drawer',
				formContext,
				trigger,
			}}
			destroy={{}}
		/>
	);
}
