import { AuditStatus } from "@/services/enums";
import { useModel } from "@umijs/max";
import { Space, Tag, Timeline, TimelineItemProps, Typography, theme } from "antd";

/**
 * 审核记录时间轴
 */
const AuditTimeline: React.FC<{
    auditList?: API.AuditItem[];
}> = ({ auditList }) => {
    const { getKeyDict } = useModel('useDict');
    const auditStatusDict = getKeyDict('audit_status');
    const auditActionTypeDict = getKeyDict('audit_action_type');
    const { token } = theme.useToken();

    return (
        <Timeline
            mode="left"
            items={auditList?.map((t) => {
                const status = t.status ? auditStatusDict[t.status] : undefined;
                const type = t.actionType ? auditActionTypeDict[t.actionType] : undefined;

                let item: TimelineItemProps = {
                    children: (
                        <Space direction="vertical">
                            <Space size="large">
                                <span>{type?.name}</span>
                                <Typography.Text type="secondary">{t.createTime}</Typography.Text>
                                <Tag color={status?.antStatus}>{status?.name}</Tag>
                            </Space>
                            <span>{t.remark}</span>
                        </Space>
                    ),
                };
                if (t.status === AuditStatus.REJECTED) {
                    item.color = token.colorError;
                }

                return item;
            }) ?? []}
        />
    );
}

export default AuditTimeline;