import {
	BizContainer,
	BizValueType,
	ModeType,
	PermissionJson,
} from '@/components';
import { business } from '@/services';
import { useIntl } from '@@/exports';
import { ProColumns, ProFormText } from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import React from 'react';

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

export default function PermissionList(props: IPermissionListProps) {
	const {
		mode = 'page',
		ghost = false,
		search = true,
		onValueChange,
		trigger,
	} = props;
	const intl = useIntl();
	const intlPrefix = 'permission';

	const formContext = [
		<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',
					}),
				},
			]}
		/>,
		<ProFormText
			key="slug"
			name="slug"
			label={intl.formatMessage({
				id: intlPrefix + '.form.slug.label',
			})}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.slug.placeholder',
			})}
			required={true}
			fieldProps={{
				showCount: true,
				maxLength: 50,
			}}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.slug.required',
					}),
				},
			]}
		/>,
	];

	const columns: ProColumns<BusinessAPI.PermissionVO, BizValueType>[] = [
		{
			title: intl.formatMessage({
				id: intlPrefix + '.column.name',
			}),
			dataIndex: 'name',
			fieldProps: {
				placeholder: intl.formatMessage({
					id: intlPrefix + '.column.name.placeholder',
				}),
			},
		},
		{
			title: intl.formatMessage({
				id: intlPrefix + '.column.slug',
			}),
			dataIndex: 'slug',
			fieldProps: {
				placeholder: intl.formatMessage({
					id: intlPrefix + '.column.slug.placeholder',
				}),
			},
		},
	];

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

	return (
		<BizContainer<
			typeof business.permission,
			BusinessAPI.PermissionVO,
			BusinessAPI.PermissionPageQry,
			BusinessAPI.PermissionCreateCmd,
			BusinessAPI.PermissionUpdateCmd
		>
			rowKey={'permissionId'}
			permission={'operation-permission'}
			func={business.permission}
			method={'permission'}
			methodUpper={'Permission'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{
				ghost,
			}}
			page={{
				fieldProps: {
					ghost,
					//@ts-ignore
					search,
					params: {},
					toolBarRender: () => {
						return [<PermissionJson key="permissionJson" />];
					},
				},
				columns,
			}}
			create={{
				formType: 'drawer',
				initValues: {},
				formContext,
				trigger,
			}}
			update={{
				formType: 'drawer',
				formContext,
				trigger,
			}}
			destroy={{}}
			detail={{
				formType: 'drawer',
				columns: detailColumns,
				trigger,
			}}
		/>
	);
}
