import {
	BizContainer,
	BizValueType,
	BoxBrandList,
	ModeType,
} from '@/components';
import { business } from '@/services';
import { useIntl } from '@@/exports';
import {
	ProCard,
	ProColumns,
	ProFormDigit,
	ProFormMoney,
	ProFormSelect,
	ProFormText,
} from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import { Col, Row } from 'antd';
import React, { useState } from 'react';

interface IBoxProductListProps {
	ghost?: boolean;
	productId?: BusinessAPI.BoxProductVO['productId'];
	search?: boolean;
	onValueChange?: () => void;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
}
export default function BoxProductList(props: IBoxProductListProps) {
	const {
		ghost = false,
		productId,
		search = true,
		mode = 'drag',
		trigger,
		onValueChange,
	} = props;
	const intl = useIntl();
	const intlPrefix = 'boxProduct';

	const [activeKey, setActiveKey] = useState<
		BusinessAPI.BoxProductPageQry['specId'] | undefined | 'ALL'
	>();
	const [boxBrand, setBoxBrand] = useState<BusinessAPI.BoxBrandVO>();
	const [type, setType] = useState<
		BusinessAPI.BoxBrandVO['type'] | undefined | 'ALL'
	>('OUR_BOX');

	const columns: ProColumns<BusinessAPI.BoxProductVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.name' }),
			dataIndex: 'name',
			key: 'name',
			renderText: (text: string) => <span className="font-medium">{text}</span>,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.weight' }),
			dataIndex: 'weight',
			key: 'weight',
			valueType: 'digit',
			fieldProps: {
				precision: 2,
			},
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.costPrice' }),
			dataIndex: 'costPrice',
			key: 'costPrice',
			valueType: 'money',
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.salePrice' }),
			dataIndex: 'salePrice',
			key: 'salePrice',
			valueType: 'money',
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.specId' }),
			dataIndex: 'specName',
			key: 'specId',
			valueType: 'text',
			search: false,
		},
	];

	const formContext = [
		<ProFormText key={'brandId'} name={'brandId'} hidden={true} />,
		<ProFormText key={'type'} name={'type'} hidden={true} />,
		<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',
					}),
				},
			]}
		/>,
		<ProFormDigit
			key={'weight'}
			name={'weight'}
			label={intl.formatMessage({ id: intlPrefix + '.form.weight.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.weight.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.weight.required',
					}),
				},
			]}
			fieldProps={{
				precision: 3,
			}}
		/>,
		<ProFormMoney
			key={'costPrice'}
			name={'costPrice'}
			label={intl.formatMessage({ id: intlPrefix + '.form.costPrice.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.costPrice.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.costPrice.required',
					}),
				},
			]}
			fieldProps={{
				precision: 2,
			}}
		/>,
		<ProFormMoney
			key={'salePrice'}
			name={'salePrice'}
			label={intl.formatMessage({ id: intlPrefix + '.form.salePrice.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.salePrice.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.salePrice.required',
					}),
				},
			]}
			fieldProps={{
				precision: 2,
			}}
		/>,
		<ProFormSelect
			key={'specId'}
			name={'specId'}
			label={intl.formatMessage({ id: intlPrefix + '.form.specId.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.specId.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.specId.required',
					}),
				},
			]}
			request={async () =>
				Promise.resolve(
					boxBrand?.boxSpecVOList?.map((item) => ({
						label: item.name,
						value: item.specId,
					})) || [],
				)
			}
		/>,
	];

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

	return (
		<BizContainer<
			typeof business.boxProduct,
			BusinessAPI.BoxProductVO,
			BusinessAPI.BoxProductPageQry,
			BusinessAPI.BoxProductCreateCmd,
			BusinessAPI.BoxProductUpdateCmd
		>
			rowKey={'productId'}
			permission={'operation-box-product'}
			func={business.boxProduct}
			method={'boxProduct'}
			methodUpper={'BoxProduct'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{
				fieldProps: {
					tabActiveKey: type,
					onTabChange: (key) => {
						setActiveKey('ALL');
						setBoxBrand(undefined);
						setType(key as BusinessAPI.BoxBrandVO['type']);
					},
					tabList: [
						{
							key: 'OUR_BOX',
							tab: intl.formatMessage({
								id: intlPrefix + '.type.ourBox',
							}),
						},
						{
							key: 'GIFT_BOX',
							tab: intl.formatMessage({
								id: intlPrefix + '.type.giftBox',
							}),
						},
						{
							key: 'THIRD_PARTY_BOX',
							tab: intl.formatMessage({
								id: intlPrefix + '.type.thirdPartyBox',
							}),
						},
					],
				},
			}}
			remark={{
				mode: 'editor',
			}}
			status
			drag={{
				fieldProps: {
					tableRender: (_, defaultDom) => (
						<Row gutter={16}>
							<Col xs={24} sm={24} md={24} lg={10} xl={8} xxl={6}>
								<BoxBrandList
									mode={'drag'}
									ghost={true}
									search={false}
									brandType={type}
									onSelect={(boxBrand: BusinessAPI.BoxBrandVO) => {
										setBoxBrand(boxBrand);
									}}
								/>
							</Col>
							{boxBrand ? (
								<Col xs={24} sm={24} md={24} lg={14} xl={16} xxl={18}>
									<ProCard>
										<div className={'text-lg font-medium'}>
											{boxBrand?.name || '请从左侧选择一个品牌'}
										</div>
									</ProCard>
									{defaultDom}
								</Col>
							) : (
								<Col xs={24} sm={24} md={24} lg={14} xl={16} xxl={18}>
									<ProCard>
										<div className="flex flex-col items-center justify-center h-64">
											<div className="text-gray-400 text-lg mb-4">
												请从左侧选择一个品牌
											</div>
											<BoxBrandList
												mode={'create'}
												ghost={true}
												search={false}
											/>
										</div>
									</ProCard>
								</Col>
							)}
						</Row>
					),
					bordered: true,
					ghost,
					//@ts-ignore
					search,
					params: {
						...(activeKey !== 'ALL' && {
							specId: activeKey!,
						}),
						//@ts-ignore
						brandId: boxBrand?.brandId || 0,
						...(type !== 'ALL' && {
							type: type,
						}),
					},
					toolbar: {
						menu: {
							type: 'tab',
							activeKey: activeKey,
							items: [
								// 全部
								{
									key: 'ALL',
									label: intl.formatMessage({
										id: intlPrefix + '.tab.all',
									}),
								},
								...(boxBrand?.boxSpecVOList?.map((boxSpec) => {
									return {
										key: boxSpec.specId,
										label: boxSpec.name,
									};
								}) || []),
							],
							onChange: (key) => {
								setActiveKey(key as BusinessAPI.BoxProductPageQry['specId']);
							},
						},
					},
				},
				columns,
			}}
			create={{
				formType: 'drawer',
				formContext,
				initValues: {
					brandId: boxBrand?.brandId,
					type: type,
				},
			}}
			update={{
				formType: 'drawer',
				formContext,
			}}
			destroy={{}}
			detail={{
				rowId: productId,
				formType: 'drawer',
				columns: detailColumns,
				trigger,
			}}
		/>
	);
}
