import { useNavigate } from '@/router'
import { Alert } from '@blueprintjs/core'
import { useAuthIdentity } from '@inject/graphql/auth'
import schema from '@inject/graphql/schema.remote.json'
import Keys from '@inject/shared/localstorage/keys'
import { useLocalStorageState } from 'ahooks'
import { Voyager } from 'graphql-voyager'
import 'graphql-voyager/dist/voyager.css'

const GraphiQLPage = /* @__PURE__ */ () => {
  const { isStaff } = useAuthIdentity()
  const [confirmed, setConfirmed] = useLocalStorageState(
    Keys.VOYAGER_CONFIRMED,
    {
      defaultValue: false,
    }
  )
  const nav = useNavigate()

  if (!isStaff) {
    return <p>You are not authorized to access this page</p>
  }

  return (
    <>
      {/* @ts-ignore */}
      <Voyager
        introspection={{
          // @ts-ignore
          data: schema,
        }}
      />
      <Alert
        isOpen={!confirmed}
        cancelButtonText='Cancel'
        onCancel={() => nav('/')}
        confirmButtonText='Confirm'
        icon='warning-sign'
        intent='warning'
        onConfirm={() => setConfirmed(true)}
      >
        <p>You are about to inspect GraphQL API. Please confirm entry</p>
        <p>
          <strong>
            Do not use this interface unless you know what you are doing.
          </strong>
        </p>
      </Alert>
    </>
  )
}

export default GraphiQLPage
