import { Descriptions } from 'antd';
import moment from 'moment';
import { memo, useEffect, useState } from 'react';
import { useIntl } from 'umi';
import { formatUserRender } from '../utils';
import style from './index.less';

export interface UserInfo {
  entryData?: number;
  nameZh?: string;
  account?: string;
  nameEn?: string;
  state?: number | string;
  department?: string;
  jobName?: string;
  [key: string]: any;
}

const UserInfoDescriptions = ({ currentUser,  ...props }) => {
  const [userInfo, setUserInfo] = useState<UserInfo>();
  const { formatMessage } = useIntl();

  useEffect(() => {
    setUserInfo(currentUser);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentUser?.id]);

  return (
    <>
      <Descriptions
        className={style.descriptions}
        {...props}
        title={formatMessage({ id: 'base.current.user.info' })}
      >
        <Descriptions.Item label={formatMessage({ id: 'base.entry.time' })}>
          {userInfo?.entryData && moment(userInfo?.entryData * 1000)?.format('YYYY-MM-DD HH:mm:ss')}
        </Descriptions.Item>
        <Descriptions.Item label={formatMessage({ id: 'base.now.user' })}>
          {formatUserRender({
            nameZh: userInfo?.nameZh,
            account: userInfo?.account || userInfo?.nameEn,
            state: userInfo?.state,
          })}
        </Descriptions.Item>
        <Descriptions.Item label={formatMessage({ id: 'base.common.user.state.department' })}>
          {userInfo?.department?.replaceAll?.('>', '-')}
        </Descriptions.Item>
        <Descriptions.Item label={formatMessage({ id: 'base.common.user.state.jobName' })}>
          {userInfo?.jobName}
        </Descriptions.Item>
      </Descriptions>
    </>
  );
};

export default memo(UserInfoDescriptions);