import { Select, Typography } from '@tidbcloud/uikit'
import { FormSwitch } from '@tidbcloud/uikit/biz'
import { observer } from 'mobx-react'
import { useEffect, useState } from 'react'
import { useFormContext } from 'react-hook-form'

import { useListBearerTokens } from 'dbaas/services/account'
import useStores from 'dbaas/stores/useStores'

import { CopyURL } from './CopyURL'
import { SCMIToken } from './Token'

const AuthenticationMode = {
  BASIC_AUTH: 'BASIC_AUTH',
  BEARER_TOKEN: 'BEARER_TOKEN'
}

export const SCIMSettings = observer(() => {
  const {
    store: { tenantData }
  } = useStores()
  const { watch } = useFormContext()
  const scimBaseUrl = watch('scim_connector_base_url')
  const identifierField = watch('scim_unique_identifier_field')
  const scimProvision = watch('scim_provision')
  const [mode, setMode] = useState(AuthenticationMode.BASIC_AUTH)
  const { data } = useListBearerTokens(
    tenantData.id,
    { page: 1, per_page: 10 },
    {
      query: {
        refetchInterval: false,
        refetchOnMount: false,
        refetchOnWindowFocus: false
      }
    }
  )

  useEffect(() => {
    if (data && !!data.total) {
      setMode(AuthenticationMode.BEARER_TOKEN)
    }
  }, [data])

  return (
    <>
      <FormSwitch
        mt={24}
        name="scim_provision"
        labelPosition="left"
        label={<Typography variant="title-md">SCIM Provisioning Accounts</Typography>}
        styles={{
          labelWrapper: {
            flex: 1
          }
        }}
      />
      <Typography variant="body-lg">
        SCIM provisioning helps centralize and automate provisioning, deprovisioning, and identity management for TiDB
        Cloud organization users from your identity provider (IdP).{' '}
        <a
          href="https://docs.pingcap.com/tidbcloud/tidb-cloud-org-sso-authentication#configure-scim-provisioning"
          target="_blank"
          rel="noreferrer"
        >
          Learn more about SCIM
        </a>
        .
      </Typography>
      {scimProvision && (
        <>
          <Typography variant="title-sm" mt={16}>
            SCIM connector base URL
          </Typography>
          <CopyURL mt={8} value={scimBaseUrl || ''} />
          <Typography variant="title-sm" mt={16}>
            Unique identifier field for users
          </Typography>
          <CopyURL mt={8} value={identifierField || ''} />
          <Typography variant="title-sm" mt={16}>
            Authentication Mode
          </Typography>
          <Select
            value={mode}
            mt={8}
            data={[
              {
                label: 'Basic Auth',
                value: AuthenticationMode.BASIC_AUTH
              },
              {
                label: 'Bearer Token',
                value: AuthenticationMode.BEARER_TOKEN
              }
            ]}
            onChange={(val) => {
              setMode(val || '')
            }}
          />
          {mode === AuthenticationMode.BASIC_AUTH ? (
            <>
              <Typography variant="body-sm" mt={4}>
                TiDB Cloud supports Basic Auth
              </Typography>
              <Typography variant="title-sm" mt={16}>
                API Authentication Token
              </Typography>
              <Typography variant="body-sm" mt={8}>
                The API public key (username) and private key (password) for a pair of TiDB Cloud API keys with
                organization owner role. Manage and find TiDB Cloud API keys from{' '}
                <a href="/org-settings/api-keys" target="_blank" rel="noreferrer">
                  here
                </a>
                .
              </Typography>
            </>
          ) : (
            <SCMIToken />
          )}
        </>
      )}
    </>
  )
})