import React, { useState } from 'react'

import { Button, Tooltip } from '@mantine/core'

import { getAuthUrl } from '~/api'
import { getRedirectURL } from '~/utils/auth'

import AsktugLogo from './asktug-logo.svg'
import GoogleLogo from './google-logo.svg'
import PingKaiLogo from './pingkai-logo.svg'
import TiDBCloudLogo from './tidbcloud-logo.svg'

enum AuthProviderEnum {
  AskTug = 'ask_tug',
  Internal = 'internal',
  TiDBCloud = 'tidbcloud',
  PingKai = 'pingkai',
  PingKaiCloud = 'pingkaicloud'
}

export type AuthProviderUnion = `${AuthProviderEnum}`

export interface LoginButtonProps {
  authProvider: AuthProviderUnion
  onClick?: (authProvider: AuthProviderUnion, authUrl: string) => void
  loading?: boolean
}

const authProviderTextAndLogo = {
  ask_tug: {
    text: 'AskTug',
    note: '',
    Logo: AsktugLogo,
    logoWidth: 25,
    logoHeight: 30
  },
  tidbcloud: {
    text: 'TiDB Account',
    note: '',
    Logo: TiDBCloudLogo,
    logoWidth: 32,
    logoHeight: 25
  },
  internal: {
    text: 'Google',
    note: 'For PingCAP Employees Only',
    Logo: GoogleLogo,
    logoWidth: 25,
    logoHeight: 30
  },
  pingkai: {
    text: 'Feishu',
    note: 'For PingKai Employees Only',
    Logo: PingKaiLogo,
    logoWidth: 70,
    logoHeight: 30
  },
  pingkaicloud: {
    text: 'PingKai Cloud',
    note: '',
    Logo: PingKaiLogo,
    logoWidth: 70,
    logoHeight: 30
  }
}

const LoginButton: React.FC<LoginButtonProps> = ({
  authProvider,
  onClick,
  loading = false
}) => {
  const meta =
    authProviderTextAndLogo[authProvider] ?? authProviderTextAndLogo.internal
  const {
    text: authName,
    note: authNote,
    Logo: AuthLogo,
    logoWidth,
    logoHeight
  } = meta

  const [isLoadingData, setLoadingData] = useState(false)
  const [errMsg, setErrMsg] = useState('')

  const handleLogin = async () => {
    if (authProvider === 'tidbcloud' || authProvider === 'pingkaicloud') {
      onClick?.(authProvider, '')
      return
    }
    setLoadingData(true)
    const res = await getAuthUrl(authProvider, getRedirectURL())

    setLoadingData(false)
    if (res.status !== 200) {
      setErrMsg(res.statusText)
      return
    }
    if (!res.data.auth_url) {
      setErrMsg('auth url is empty')
      return
    }
    onClick?.(authProvider, res.data.auth_url)
  }

  const Btn = () => (
    <Button
      fullWidth
      variant='default'
      size='xl'
      leftIcon={<AuthLogo width={logoWidth} height={logoHeight} />}
      loading={loading || isLoadingData}
      disabled={!!errMsg}
      onClick={handleLogin}
    >
      <div className='text-gray-700 font-medium text-lg'>
        Continue with {authName}
        {authNote && (
          <div className='text-gray-600 text-xs font-normal pt-1'>
            * {authNote}
          </div>
        )}
      </div>
    </Button>
  )

  if (errMsg) {
    return (
      <Tooltip label={errMsg} withArrow>
        <div className='cursor-not-allowed'>
          <Btn />
        </div>
      </Tooltip>
    )
  }

  return <Btn />
}

export default LoginButton