import React, { useMemo, useState } from 'react'

import { DeleteOutlined } from '@ant-design/icons'
import { Button, Typography, Alert } from 'antd'
import useSWR from 'swr'

import { OrgApiKeyResponse } from '@clinic/client'
import { delUploadToken, genUploadToken, listTokens } from '~/api'
import LoadingSpin from '~/components/LoadingSpin'
import { useCurOrg } from '~/hooks/state'
import { orgClustersTelemetry } from '~/telemetry'
import { formatDateTime } from '~/utils/date-time'
import { getRegionRes } from '~/utils/region-res'

const UploadTokenSetting: React.FC = () => {
  const regionRes = useMemo(() => getRegionRes(), [])
  const { curOrg } = useCurOrg()

  const {
    data: tokenListRes,
    error,
    mutate
  } = useSWR(`/orgs/${curOrg?.id!}/keys`, () => listTokens(curOrg?.id!))
  const loading = !tokenListRes && !error
  const existedToken = tokenListRes?.data.items?.[0]

  const [adding, setAdding] = useState(false)
  const [deling, setDeling] = useState(false)
  const [newToken, setNewToken] = useState<OrgApiKeyResponse | undefined>(
    undefined
  )
  const [deleteConfirm, setDeleteConfirm] = useState(false)

  async function handleGenToken() {
    try {
      setAdding(true)
      const res = await genUploadToken(curOrg?.id!)
      setNewToken(res.data)

      orgClustersTelemetry.genAccessToken()
    } catch (err) {
      console.log(err)
    } finally {
      setAdding(false)
    }
  }

  async function handleDelToken() {
    try {
      setDeling(true)
      await delUploadToken(
        curOrg?.id!,
        newToken ? newToken.id! : existedToken?.id!
      )
      setNewToken(undefined)
      setDeleteConfirm(false)
      mutate()

      orgClustersTelemetry.confirmDelAccessToken()
    } catch (err) {
      console.log(err)
    } finally {
      setDeling(false)
    }
  }

  return (
    <div>
      <p>
        You can use the Access Token to upload clinic data package from Diag
        tool. Get the way to upload cluster data by{' '}
        <a href={regionRes.uploadByTiUPLink} target='_blank'>
          TiUP
        </a>{' '}
        and{' '}
        <a href={regionRes.uploadByOperatorLink} target='_blank'>
          TiDB Operator
        </a>
        .
      </p>

      {newToken && (
        <div className='mb-4'>
          <Alert
            message='You are able to view this token here only once! Be sure to copy it before closing.'
            type='warning'
            showIcon
          />
        </div>
      )}

      <div className='flex items-center relative'>
        <div className='flex-1 flex items-center'>
          {newToken && (
            <Typography.Paragraph
              type='secondary'
              className='break-all'
              style={{ marginBottom: 0 }}
              copyable
              onClick={() => orgClustersTelemetry.copyAccessToken()}
            >
              {newToken.key}
            </Typography.Paragraph>
          )}
          {!newToken && existedToken && (
            <span className='text-gray-400'>
              Created at {formatDateTime(existedToken.createdTime!)} (Please
              check your copy)
            </span>
          )}
          {loading && <LoadingSpin />}
          {!loading && !existedToken && !newToken && (
            <Button type='primary' onClick={handleGenToken} loading={adding}>
              Create Token
            </Button>
          )}
        </div>

        {(newToken || existedToken) && deleteConfirm && (
          <div className='flex gap-2 absolute right-0 bg-white'>
            <Button
              danger
              type='primary'
              onClick={handleDelToken}
              loading={deling}
            >
              Delete
            </Button>
            <Button onClick={() => setDeleteConfirm(false)}>Cancel</Button>
          </div>
        )}
        {existedToken && !deleteConfirm && (
          <Button
            className='absolute right-0'
            danger
            type='primary'
            icon={<DeleteOutlined />}
            onClick={() => setDeleteConfirm(true)}
          />
        )}
      </div>
    </div>
  )
}

export default UploadTokenSetting