import React, { useState, useEffect } from 'react'
import { useHistory, Redirect } from 'react-router-dom'
import {
  Container,
  Heading,
  Button,
  Segment,
  Message,
  Divider,
  Form,
  Input,
  Transition,
  Select,
  Checkbox,
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
  VStack,
  Stack,
  StackDivider,
  Box,
  Text,
  InputGroup,
  InputLeftElement,
  InputRightElement,
  Alert,
  AlertIcon,
  AlertTitle,
  AlertDescription,
  AlertDialog,
  AlertDialogBody,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogContent,
  AlertDialogOverlay,
} from '@chakra-ui/react'
import { PhoneIcon } from '@chakra-ui/icons'
import http from '../utils/http'

const SignIn = () => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [isSuccess, setSuccess] = useState(false)

  const cancelRef = React.useRef()
  const onClose = () => setSuccess(false)

  const handleUsernameOnChange = (event) => {
    setUsername(event.target.value)
  }

  const handlePasswordOnChange = (event) => {
    setPassword(event.target.value)
  }

  const signIn = () => {
    http.post('/login').then(response => {
      const { success, access_token } = response.data
      if (success) {
        localStorage.setItem('token', access_token)
        setSuccess(true)
      }
    })
  }

  useEffect(() => {
  }, [])

  return (
    <Container>
      <Heading>Sign-In</Heading>
      <br/>

      <Stack
        // divider={<StackDivider borderColor="gray.200"/>}
        spacing={4}
        align="stretch"
      >
        <Input
          type="text"
          placeholder="username"
          value={username}
          onChange={handleUsernameOnChange}
        />

        <InputGroup size="md">
          <Input
            pr="4.5rem"
            type="password"
            placeholder="Enter password"
            value={password}
            onChange={handlePasswordOnChange}
          />
          <InputRightElement width="4.5rem">
          </InputRightElement>
        </InputGroup>

        <Button
          colorScheme="teal"
          onClick={() => signIn()}
        >
          Sign In
        </Button>
      </Stack>

      <AlertDialog
        isOpen={isSuccess}
        leastDestructiveRef={cancelRef}
        onClose={onClose}
      >
        <AlertDialogOverlay>
          <AlertDialogContent>
            <Alert status="success">
              <AlertIcon />
              Successfully signed in !
            </Alert>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
    </Container>
  )
}

export default SignIn