import {
	BizContainer,
	BizValueType,
	MaterialList,
	ModeType,
	ProFormUploadMaterial,
} from '@/components';
import { business } from '@/services';
import { formatBankCard, formatIdCard, formatPhone } from '@/utils/format';
import { formatParam } from '@/utils/formatParam';
import { useIntl } from '@@/exports';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import {
	ActionType,
	ProColumns,
	ProFormText,
} from '@ant-design/pro-components';
import { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import React, { useRef, useState } from 'react';

interface ISupplierFarmerListProps {
	ghost?: boolean;
	supplierId?: BusinessAPI.SupplierVO['supplierId'];
	search?: boolean;
	onValueChange?: () => void;
	mode?: ModeType;
	trigger?: () => React.ReactNode;
}

export default function SupplierFarmerList(props: ISupplierFarmerListProps) {
	const {
		ghost = false,
		supplierId,
		search = true,
		mode = 'page',
		trigger,
		onValueChange,
	} = props;
	const intl = useIntl();
	const intlPrefix = 'supplierFarmer';
	const actionRef = useRef<ActionType>();

	const [showIdCard, setShowIdCard] = useState<Record<string, boolean>>({});
	const [showBankCard, setShowBankCard] = useState<Record<string, boolean>>({});
	const [showPhone, setShowPhone] = useState<Record<string, boolean>>({});

	const columns: ProColumns<BusinessAPI.SupplierVO, 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.idCard',
			}),
			dataIndex: 'idCard',
			key: 'idCard',
			render: (_, record) => (
				<div className="flex items-center">
					<span>
						{formatIdCard(record.idCard!, showIdCard[record.supplierId])}
					</span>
					<span
						className="ml-2 cursor-pointer"
						onClick={() => {
							setShowIdCard((prev) => ({
								...prev,
								[record.supplierId]: !prev[record.supplierId],
							}));
						}}
					>
						{showIdCard[record.supplierId] ? (
							<EyeTwoTone />
						) : (
							<EyeInvisibleOutlined />
						)}
					</span>
				</div>
			),
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.phone' }),
			dataIndex: 'phone',
			key: 'phone',
			render: (_, record) => (
				<div className="flex items-center">
					<span>{formatPhone(record.phone, showPhone[record.supplierId])}</span>
					<span
						className="ml-2 cursor-pointer"
						onClick={() => {
							setShowPhone((prev) => ({
								...prev,
								[record.supplierId]: !prev[record.supplierId],
							}));
						}}
					>
						{showPhone[record.supplierId] ? (
							<EyeTwoTone />
						) : (
							<EyeInvisibleOutlined />
						)}
					</span>
				</div>
			),
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.bankName' }),
			dataIndex: 'bankName',
			key: 'bankName',
			search: false,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.bankCard' }),
			dataIndex: 'bankCard',
			key: 'bankCard',
			render: (_, record) => (
				<div className="flex items-center">
					<span>
						{formatBankCard(record.bankCard, showBankCard[record.supplierId])}
					</span>
					<span
						className="ml-2 cursor-pointer"
						onClick={() => {
							setShowBankCard((prev) => ({
								...prev,
								[record.supplierId]: !prev[record.supplierId],
							}));
						}}
					>
						{showBankCard[record.supplierId] ? (
							<EyeTwoTone />
						) : (
							<EyeInvisibleOutlined />
						)}
					</span>
				</div>
			),
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.wechatQr' }),
			dataIndex: 'wechatQr',
			valueType: 'image',
			key: 'wechatQr',
			search: false,
		},
	];

	const formContext = [
		<ProFormText key={'type'} name={'type'} hidden={true} />,
		<ProFormText key={'payeeName'} name={'payeeName'} 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',
			})}
			transform={(value) => {
				return {
					name: value,
					payeeName: value,
				};
			}}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.name.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'idCard'}
			name={'idCard'}
			label={intl.formatMessage({ id: intlPrefix + '.form.idCard.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.idCard.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.idCard.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'phone'}
			name={'phone'}
			label={intl.formatMessage({ id: intlPrefix + '.form.phone.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.phone.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.phone.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'bankName'}
			name={'bankName'}
			label={intl.formatMessage({ id: intlPrefix + '.form.bankName.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.bankName.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.bankName.required',
					}),
				},
			]}
		/>,
		<ProFormText
			key={'bankCard'}
			name={'bankCard'}
			label={intl.formatMessage({ id: intlPrefix + '.form.bankCard.label' })}
			required={true}
			placeholder={intl.formatMessage({
				id: intlPrefix + '.form.bankCard.placeholder',
			})}
			rules={[
				{
					required: true,
					message: intl.formatMessage({
						id: intlPrefix + '.form.bankCard.required',
					}),
				},
			]}
		/>,
		<ProFormUploadMaterial
			key={'wechatQr'}
			label={intl.formatMessage({
				id: intlPrefix + '.form.wechatQr.label',
			})}
			name={'wechatQrList'}
			transform={(value) => {
				return {
					wechatQrList: value,
					wechatQr: 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,
					};
				},
			}}
		/>,
	];

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

	return (
		<BizContainer<
			typeof business.supplier,
			BusinessAPI.SupplierVO,
			BusinessAPI.SupplierPageQry,
			BusinessAPI.SupplierCreateCmd,
			BusinessAPI.SupplierUpdateCmd
		>
			rowKey={'supplierId'}
			permission={'operation-supplier'}
			func={business.supplier}
			method={'supplier'}
			methodUpper={'Supplier'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{
				ghost,
			}}
			remark={{
				mode: 'editor',
			}}
			status
			page={{
				fieldProps: {
					bordered: true,
					ghost,
					//@ts-ignore
					search,
					params: {
						type: 'FARMER',
					},
				},
				columns,
			}}
			create={{
				formType: 'drawer',
				formContext,
				initValues: {
					status: true,
					type: 'FARMER',
				},
			}}
			update={{
				formType: 'drawer',
				formContext,
			}}
			destroy={{}}
			detail={{
				rowId: supplierId,
				formType: 'drawer',
				columns: detailColumns,
				trigger,
			}}
		/>
	);
}