import {
  ExportOutlined,
  UserOutlined,
  ProfileOutlined,
  FileTextOutlined
} from '@ant-design/icons'
import { Menu, Space, Typography } from 'antd'
import React from 'react'
import useProfileContext from 'useProfileContext'

import auth from 'apiClient/auth'

const Profile = () => {
  const {
    profile: { operatorName, userEmail }
  } = useProfileContext()

  return (
    <Space align="start">
      <UserOutlined />
      <Space direction="vertical" size={0}>
        <Typography>{operatorName}</Typography>
        <Typography>{userEmail}</Typography>
      </Space>
    </Space>
  )
}

export default () => {
  const onLogout = () => {
    auth.logout()
  }

  return (
    <Menu>
      <Menu.Item>
        <Profile />
      </Menu.Item>
      <Menu.Item>
        <a
          href="/profile"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: 'flex',
            alignItems: 'center',
            width: '100%',
            color: 'inherit'
          }}
        >
          <ProfileOutlined style={{ marginRight: 8 }} />
          <span>Profile</span>
        </a>
      </Menu.Item>
      <Menu.Item>
        <a
          href="https://pingcap.feishu.cn/wiki/RkqywpaUaiNoJokMcMpcRcAenEh"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: 'flex',
            alignItems: 'center',
            width: '100%',
            color: 'inherit'
          }}
        >
          <FileTextOutlined style={{ marginRight: 8 }} />
          <span>Documents</span>
        </a>
      </Menu.Item>
      <Menu.Item onClick={onLogout}>
        <Space>
          <ExportOutlined />
          <span>Logout</span>
        </Space>
      </Menu.Item>
    </Menu>
  )
}