import { ReloadOutlined } from '@ant-design/icons';
import { Spin } from 'antd';
import Link from 'antd/lib/typography/Link';
import moment from 'moment';
import type { CSSProperties } from 'react';
import { useIntl, useRequest } from 'umi';

const styles: Record<'div' | 'link' | 'spin', CSSProperties> = {
  div: {
    height: 15,
    width: 'max-content',
    lineHeight: '15px',
    userSelect: 'none',
    color: '#999',
    fontSize: 12,
  },
  link: {
    padding: '0 4px',
    fontSize: 12,
  },
  spin: {
    height: 15,
    padding: '0 4px',
  },
};

const UserSuperiorTime = () => {
  const { formatMessage } = useIntl();

  const { loading, data, run } = useRequest(() => ({
    url: '/goapi/config',
    method: 'GET',
  }));

  const timeText = data?.lastSyncUserTime
    ? moment(data.lastSyncUserTime * 1000).format('YYYY-MM-DD HH:mm:ss')
    : formatMessage({
        id: 'component.UserSuperior.data.sync.time.empty',
        defaultMessage: '未同步',
      });

  return (
    <div style={styles.div}>
      {formatMessage({
        id: 'component.UserSuperior.data.sync.time',
        defaultMessage: '数据同步时间',
      })}

      {loading ? (
        <Spin style={styles.spin} size={'small'} />
      ) : (
        <>
          <Link style={styles.link} onClick={run}>
            <ReloadOutlined />
          </Link>
          :&nbsp;
          {timeText}
        </>
      )}
    </div>
  );
};

export default UserSuperiorTime;