import { BizContainer, BizValueType, MaterialList } from '@/components';
import { business } from '@/services';
import { formatParam } from '@/utils/formatParam';
import { useIntl } from '@@/exports';
import {
	ActionType,
	ProColumns,
	ProFormText,
	ProFormTextArea,
} from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import { ProFormUploadMaterial } from '@chageable/components';
import { useRef } from 'react';

export default function ChannelList() {
	const intl = useIntl();
	const intlPrefix = 'channel';
	const actionRef = useRef<ActionType>();

	const formContext = [
		<ProFormText
			key={'title'}
			name={'title'}
			label={intl.formatMessage({ id: intlPrefix + '.form.title.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.title.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.title.required',
					}),
				},
			]}
		/>,
		<ProFormTextArea
			key={'subTitle'}
			name={'subTitle'}
			label={intl.formatMessage({ id: intlPrefix + '.form.subTitle.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.subTitle.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.subTitle.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'domain'}
			name={'domain'}
			label={intl.formatMessage({ id: intlPrefix + '.form.domain.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.domain.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.domain.required',
					}),
				},
			]}
		/>,
		<ProFormUploadMaterial
			key={'logo'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.logo.label',
			})}
			name={'logoList'}
			transform={(value) => {
				return {
					logoList: value,
					logo: 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,
					};
				},
			}}
		/>,
		<ProFormUploadMaterial
			key={'backgroundImageUrl'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.backgroundImageUrl.label',
			})}
			name={'backgroundImageUrlList'}
			transform={(value) => {
				return {
					backgroundImageUrlList: value,
					backgroundImageUrl: 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,
					};
				},
			}}
		/>,
		<ProFormText
			key={'technicalSupport'}
			name={'technicalSupport'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.technicalSupport.label',
			})}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.technicalSupport.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.technicalSupport.required',
					}),
				},
			]}
		/>,
	];

	const columns: ProColumns<BusinessAPI.ChannelVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.logo' }),
			dataIndex: 'logo',
			valueType: 'image',
			hideInSearch: true,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.title' }),
			dataIndex: 'title',
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.subTitle' }),
			dataIndex: 'subTitle',
			hideInSearch: true,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.domain' }),
			dataIndex: 'domain',
			valueType: 'text',
			hideInSearch: true,
		},
		{
			title: intl.formatMessage({
				id: intlPrefix + '.column.backgroundImageUrl',
			}),
			dataIndex: 'backgroundImageUrl',
			valueType: 'image',
			hideInSearch: true,
		},
		{
			title: intl.formatMessage({
				id: intlPrefix + '.column.technicalSupport',
			}),
			dataIndex: 'technicalSupport',
			hideInSearch: true,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.createdAt' }),
			dataIndex: 'createdAt',
			valueType: 'dateTime',
			hideInSearch: true,
		},
	];

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

	return (
		<BizContainer<
			typeof business.channel,
			BusinessAPI.ChannelVO,
			BusinessAPI.ChannelPageQry,
			BusinessAPI.ChannelCreateCmd,
			BusinessAPI.ChannelUpdateCmd
		>
			rowKey={'channelId'}
			permission={'operation-channel'}
			func={business.channel}
			method={'channel'}
			methodUpper={'Channel'}
			intlPrefix={intlPrefix}
			modeType={'page'}
			container={{}}
			page={{
				fieldProps: {},
				columns,
			}}
			create={{
				formType: 'drawer',
				formContext,
			}}
			update={{
				formType: 'drawer',
				formContext,
				// @ts-ignore
				transform: (value) => {
					return {
						...value,
						backgroundImageUrlList: [value.backgroundImageUrl],
						logoList: [value.logo],
					};
				},
			}}
			destroy={{}}
			detail={{
				formType: 'drawer',
				columns: detailColumns,
			}}
		/>
	);
}