import React from 'react'
import axios from 'axios'
import { Container, Button, Heading } from '@chakra-ui/react'

export default function TestErrors() {
  const baseUrl = 'http://localhost:5000/api/'

  function handleNotFound() {
    axios
      .get(baseUrl + 'buggy/not-found')
      .catch((err) => console.error(err.response))
  }

  function handleBadRequest() {
    axios
      .get(baseUrl + 'buggy/bad-request')
      .catch((err) => console.error(err.response))
  }

  function handleServerError() {
    axios
      .get(baseUrl + 'buggy/server-error')
      .catch((err) => console.error(err.response))
  }

  function handleUnauthorised() {
    axios
      .get(baseUrl + 'buggy/unauthorised')
      .catch((err) => console.error(err.response))
  }

  function handleBadGuid() {
    axios
      .get(baseUrl + 'activities/notaguid')
      .catch((err) => console.error(err.response))
  }

  function handleValidationError() {
    axios
      .post(baseUrl + 'activities', {})
      .catch((err) => console.error(err.reponse))
  }

  return (
    <>
      <Container>
        <Heading as='h1'>Test Error component</Heading>
        <Container>
          <div>
            <Button onMouseDown={handleNotFound}>Not Found</Button>
            <Button onMouseDown={handleBadRequest}>Bad Request</Button>
            <Button onMouseDown={handleValidationError}>Validation Error</Button>
            <Button onMouseDown={handleServerError}>Server Error</Button>
            <Button onMouseDown={handleUnauthorised}>Unauthorised</Button>
            <Button onMouseDown={handleBadGuid}>Bad Guid</Button>
          </div>
        </Container>
      </Container>
    </>
  )
}
