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

const { Text } = Typography;

export interface UacStaffUserProps {
  row: Record<string, any>;
  horizontal?: boolean;
}

const UacStaffUser = (props: UacStaffUserProps) => {
  const { horizontal, row } = props;
  const { auditUser, originAuditUsers, proxyUsers } = row;
  const l = auditUser || originAuditUsers;
  const users = Array.isArray(l) ? l : [l];

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

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

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

export default UacStaffUser;