import React from 'react'
import { RiExternalLinkLine } from 'react-icons/ri'
import { Heading, Stack, Link, Spacer, chakra } from '@chakra-ui/react'

import useLogin from '../hooks/useLogin'
import { Redirect } from 'react-router-dom'

const Login: React.FC = () => {
  const { response, isLoading } = useLogin<{ authenticated: boolean }>('auth/check')

  if (isLoading || !response) return null

  return response.authenticated ? (
    <Redirect to="/museo" />
  ) : (
    <Stack h="100vh" direction="column" justify="center" align="center" w="100%">
      <Spacer />
      <Heading w="100%" mb="2rem" textAlign="center">
        museo.red
      </Heading>
      <Stack direction="row" spacing="2rem">
        <Link href="/auth/facebook">ingresar con facebook</Link>
        <Link href="/auth/twitter">ingresar con twitter</Link>
        <Link href="/auth/google">ingresar con google</Link>
      </Stack>
      <Spacer />
      <Link
        fontWeight="bold"
        textAlign="center"
        mb="1.5rem"
        p="0.5rem 1rem"
        _hover={{ backgroundColor: 'gray.100' }}
        color="gray.500"
        textDecoration="none"
        href="https://taller5.ludicc.cc/artimañas2020"
        isExternal
        display="flex"
      >
        Llevado a cabo por Ian Mancini para Artimañas 2020{' '}
        <chakra.span ml="0.5em">
          <RiExternalLinkLine />
        </chakra.span>
      </Link>
    </Stack>
  )
}

export default Login
