import type { StepProps } from 'antd';
import { Space, Steps, Tag } from 'antd';
import { useMemo } from 'react';
import { useIntl, useModel } from 'umi';
import UserLink from '../../UserInfo/link';
import style from '../index.less';
import StaffUser from './staffUser';
import UacStaffUser from './uacStaffUser';

export interface ApprovalStepsProps {
  record: Record<string, any>[];
  type: string;
}

const ApprovalSteps = (props: ApprovalStepsProps) => {
  const { record, type } = props;
  const { formatMessage } = useIntl();

  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  const items = useMemo(() => {
    const res: StepProps[] =
      record?.map((item) => {
        const { type: itemType, isCcNode } = item;
        const title = (
          <Space direction={'vertical'}>
            {type == 'bpm' ? (
              <span className={style.spaceItem} style={{ fontSize: 14 }}>
                {itemType == 'Start' ? (
                  <UserLink user={currentUser} />
                ) : (
                  <StaffUser horizontal={record.length > 2} row={item} />
                )}
              </span>
            ) : (
              <span className={style.spaceItem}>
                <UacStaffUser horizontal={record.length > 2} row={item} />
              </span>
            )}
          </Space>
        );
        return {
          title,
          description: isCcNode ? (
            <Tag color={'error'}>
              {formatMessage({ id: 'component.AduitPreview.steps.noticeNode' })}
            </Tag>
          ) : undefined,
        };
      }) ?? [];

    res.push({
      title: (
        <span className={style.finish}>{formatMessage({ id: 'base.aduitpreview.finish' })}</span>
      ),
    });

    return res;
  }, [currentUser, formatMessage, record, type]);

  return (
    <Steps
      className={items.length > 3 ? style.step : style.stepHorizontal}
      current={items.length - 1}
      status={'wait'}
      progressDot
      items={items}
      direction={items.length > 3 ? 'vertical' : 'horizontal'}
    />
  );
};

export default ApprovalSteps;