import { Space, Tag, Tooltip, Typography } from 'antd';
import { FormattedMessage } from 'umi';
import { formatUserRender } from '../../utils';
import { bpmNameFormat } from '../util';
import ProxyUser from './proxyUser';

const { Text } = Typography;

export interface StaffUserProps {
  row: { staff?: Record<string, any>[] };
  horizontal?: boolean;
}

const StaffUser = (props: StaffUserProps) => {
  const { horizontal, row } = props;
  const { staff } = row || {};

  return (
    <Space
      style={{ fontSize: 14 }}
      size={'small'}
      wrap
      direction={horizontal ? 'horizontal' : 'vertical'}
    >
      {staff?.map((user) => {
        const { proxyUsers, account, name, nameZh, nameEn, state } = user;
        const key = account || nameEn || name || nameZh;

        return (
          <div key={`StaffUser_${key}`}>
            <Text ellipsis={{ tooltip: true }} style={{ whiteSpace: 'nowrap', fontSize: 14 }}>
              <span style={{ display: 'inline-block' }}>
                {formatUserRender({
                  nameZh: bpmNameFormat(name || nameZh),
                  account: key,
                  state,
                })}
              </span>

              {Boolean(proxyUsers) && (
                <Tooltip title={<ProxyUser proxyItems={proxyUsers} />}>
                  <Tag color={'error'}>
                    <FormattedMessage id={'component.AuditProgress.proxy'} />
                  </Tag>
                </Tooltip>
              )}
            </Text>
          </div>
        );
      })}
    </Space>
  );
};

export default StaffUser;