import { getToken, removeToken, setToken } from '@/utils'
import { Button, Input, message, Popconfirm, Space, Tooltip } from 'antd'
import copy from 'copy-to-clipboard'
import { useState } from 'react'

export const AuthTab = () => {
  const [tokenValue, setTokenValue] = useState(getToken() || '')

  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      <Space direction="vertical" style={{ width: '100%' }}>
        <span>Token：</span>
        <Input.TextArea
          rows={3}
          value={tokenValue}
          onChange={(e) => {
            setTokenValue(e.target.value)
          }}
        />
        <Space>
          <Tooltip title="设置token">
            <Button
              type="link"
              onClick={() => {
                tokenValue && setToken(tokenValue)
                message.success('设置token成功')
              }}
              size="small"
            >
              设置
            </Button>
          </Tooltip>
          <Popconfirm
            title="是否确认要清空token？"
            onConfirm={() => {
              setTokenValue('')
              removeToken()
              message.success('已清空token')
            }}
          >
            <Tooltip title="清空已设置的token">
              <Button type="link" size="small">
                清空
              </Button>
            </Tooltip>
          </Popconfirm>
          <Tooltip title="复制已设置的token">
            <Button
              type="link"
              onClick={() => {
                copy(getToken() || '')
                message.success('已复制token')
              }}
              size="small"
            >
              复制
            </Button>
          </Tooltip>
        </Space>
      </Space>
    </Space>
  )
}