import { Button } from '@tidbcloud/uikit'
import { useState } from 'react'

import { getOas } from 'dbaas/services/dataservice'

import { useDataApiContext } from '../../context'
import { showErrorMsg } from '../../helpers'
import { AuthModal } from '../Settings/OpenApi'

const SwaggerDocs = () => {
  const [docVerifing, setDocVerifing] = useState(false)
  const { editApp, orgId, projectId } = useDataApiContext()
  const [authOpened, setAuthOpened] = useState(false)

  const generateDocsHandler = () => {
    if (!editApp?.oas_authorized) {
      setAuthOpened(true)
      return
    }

    toSwagger()
  }

  const toSwagger = async () => {
    setDocVerifing(true)
    try {
      const res = await getOas(orgId, projectId, `${editApp?.id}`, {
        format: 'json'
      })
      setDocVerifing(false)

      if (res.data) {
        window.open(`/dataservice-swagger?appId=${editApp?.id}`)
      } else {
        showErrorMsg(res, true)
      }
    } catch (e) {
      setDocVerifing(false)
      showErrorMsg(e, true)
    }
  }

  return (
    <>
      <Button
        variant="default"
        size="xs"
        loading={docVerifing}
        onClick={generateDocsHandler}
        data-mp-event="mp-viewapidocs-1691461016690"
      >
        View API Docs
      </Button>
      <AuthModal
        opened={authOpened}
        cb={() => {
          setAuthOpened(false)
          toSwagger()
        }}
        onClose={() => setAuthOpened(false)}
      />
    </>
  )
}

export default SwaggerDocs