import React from 'react'
import useStore from '../store'
import { Box, Heading, Link, Stack, Text } from '@chakra-ui/react'

import DisconnectButton from './DisconnectButton'

const Error: React.FC = () => {
  const error = useStore((state) => state.error)

  const errorText = (): string => {
    switch (error) {
      case 'SOCKET': {
        return 'Ocurrió un error de conexión'
      }
      default:
        return 'Ocurrió un error desconocido'
    }
  }

  const reloadPage = () => {
    window.location.reload()
    return false
  }

  return (
    <Stack
      h="100vh"
      direction="column"
      justify="center"
      align="center"
      w="100%"
      spacing="1rem"
      position="relative"
    >
      <Box
        position="absolute"
        bottom={0}
        right={50}
        left={50}
        textAlign="center"
        pb="2rem"
      >
        <DisconnectButton />
      </Box>
      <Heading mb="2rem">¡Oh no! </Heading>
      <Box textAlign="center" px="2rem">
        <Text>{errorText()}</Text>
        <Text mb="2rem">
          Por favor,{' '}
          <Link
            onClick={() => reloadPage()}
            fontWeight="bold"
            pading="0.5rem"
            _hover={{ backgroundColor: 'gray.100' }}
          >
            clickeá acá para recargar la página{' '}
          </Link>
        </Text>
      </Box>
      <Text as="small" px="2rem" textAlign="center">
        Si el problema persiste, envía un correo electrónico a{' '}
        <Link href="mailto:ianmethyst@gmail.com">ianmethyst@gmail.com</Link>
      </Text>
    </Stack>
  )
}

export default Error
