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

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

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

	// 是否已读状态映射
	const isReadMap: Record<string, { text: string; color: string }> = {
		false: {
			text: intl.formatMessage({ id: intlPrefix + '.status.unread' }),
			color: 'red',
		},
		true: {
			text: intl.formatMessage({ id: intlPrefix + '.status.read' }),
			color: 'default',
		},
	};

	const columns: ProColumns<BusinessAPI.MessageReceiverVO, BizValueType>[] = [
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.title' }),
			dataIndex: ['messageVO', 'title'],
			key: 'messageId',
			ellipsis: true,
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.content' }),
			dataIndex: ['messageVO', 'content'],
			key: 'content',
			ellipsis: true,
			hideInTable: true, // 内容较长，在表格中隐藏，只在详情中显示
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.isRead' }),
			dataIndex: 'isRead',
			key: 'isRead',
			valueType: 'select',
			valueEnum: {
				true: {
					text: isReadMap.true.text,
					status: 'Default',
				},
				false: {
					text: isReadMap.false.text,
					status: 'Error',
				},
			},
			render: (_, record) => {
				const isRead = record.isRead ? 'true' : 'false';
				const isReadInfo = isReadMap[isRead];
				return <Tag color={isReadInfo.color}>{isReadInfo.text}</Tag>;
			},
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.readAt' }),
			dataIndex: 'readAt',
			key: 'readAt',
			valueType: 'dateTime',
			search: false,
			hideInTable: true, // 已读时间通常不显示在列表中
		},
		{
			title: intl.formatMessage({ id: intlPrefix + '.column.createdAt' }),
			dataIndex: 'createdAt',
			key: 'createdAt',
			valueType: 'dateTime',
			search: false,
			sorter: true,
		},
	];

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

	return (
		<BizContainer<
			typeof business.messageReceiver,
			BusinessAPI.MessageReceiverVO,
			BusinessAPI.MessageReceiverPageQry
		>
			rowKey={'messageReceiverId'}
			permission={'operation-notify-message-record'}
			func={business.messageReceiver}
			method={'messageReceiver'}
			methodUpper={'MessageReceiver'}
			intlPrefix={intlPrefix}
			modeType={mode}
			onValueChange={onValueChange}
			container={{ ghost }}
			actionRef={actionRef}
			status={false}
			page={{
				fieldProps: {
					bordered: true,
					ghost,
					// @ts-ignore
					search,
					pagination: {
						defaultPageSize: 20,
						showSizeChanger: true,
						showQuickJumper: true,
					},
				},
				columns,
				options: () => [],
				// 自定义行点击事件，点击消息自动标记已读
				onRow: (record: any) => ({
					onClick: async () => {
						// 如果未读，标记为已读
						if (!record.isRead) {
							try {
								await business.messageReceiver.markReadMessageReceiver({
									messageReceiverId: record.messageReceiverId,
								});
								actionRef.current?.reload();
								onValueChange?.();
							} catch (error) {
								console.error('标记已读失败:', error);
							}
						}
					},
				}),
			}}
			create={false}
			update={false}
			destroy={false}
			detail={{
				formType: 'drawer',
				columns: detailColumns,
				trigger,
			}}
		/>
	);
}
