import { useIntl } from '@vtex/gatsby-plugin-i18n'
import { Alert, Box, Button, Center, Spinner } from '@vtex/store-ui'
import React, { FC, useEffect, useState } from 'react'

import { oAuthCallbackUrl, oAuthRedirectUrl } from '../../../../sdk/auth/OAuth'
import { useStartLogin } from '../../../../sdk/auth/useStartLogin'
import { AuthProviderComponentProps } from '../types'

type State = 'initial' | 'error'

const FacebookOAuth: FC<AuthProviderComponentProps> = ({ variant: v }) => {
  const startLogin = useStartLogin()
  const { formatMessage } = useIntl()
  const [state, setState] = useState<State>('initial')
  const variant = `facebookOAuth.${v}`

  useEffect(() => {
    ;(async () => {
      try {
        if (state === 'initial') {
          await startLogin({
            callbackUrl: oAuthCallbackUrl,
          })

          window.location.href = oAuthRedirectUrl({ providerName: 'Facebook' })
        }
      } catch {
        setState('error')
      }
    })()
  }, [startLogin, state])

  return (
    <Box variant={variant}>
      <Box variant={`${variant}.title`}>
        {formatMessage({
          id: 'login.page.facebookOAuth.title',
          defaultMessage: 'Signing in with facebook',
        })}
      </Box>
      {state === 'initial' ? (
        <Center>
          <Spinner />
        </Center>
      ) : (
        <>
          <Alert variant="signInDanger">
            {formatMessage({
              id: 'login.page.facebookOAuth.error',
              defaultMessage:
                'Signing in with Facebook failed. Please try again later or click on the button below to try again',
            })}
          </Alert>
          <Button onClick={() => setState('initial')}>
            {formatMessage({
              id: 'login.page.facebookOAuth.tryAgain',
              defaultMessage: 'Try Again',
            })}
          </Button>
        </>
      )}
    </Box>
  )
}

export default FacebookOAuth