import React, { useState, useEffect } from 'react'
import { useHistory, Redirect } from 'react-router-dom'
import {
  Container,
  Heading,
  Button,
  Segment,
  Message,
  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 {
  Divider,
} from 'semantic-ui-react'
import http from '../utils/http'

const SignUp = () => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [phone, setPhone] = 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 handleNameOnChange = (event) => {
    setName(event.target.value)
  }

  const handlePhoneOnChange = (event) => {
    setPhone(event.target.value)
  }

  const handleEmailOnChange = (event) => {
    setEmail(event.target.value)
  }

  const signUp = () => {
    http.post('/user/register', {
      userId: username,
      password: password,
      // eslint-disable-next-line no-restricted-globals
      name: name,
      phone: phone,
      email: email,
    }).then(response => {
      const { success, code, message, data } = response.data
      if (success) {
        setSuccess(true)
      }
    }).catch(error => {
      console.error(error)
    })
  }

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

  return (
    <Container>
      <Divider hidden />
      <Heading>Sign-Up</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>

        <Input
          type="email"
          placeholder="email"
          value={email}
          onChange={handleEmailOnChange}
        />


        <Input
          type="text"
          placeholder="Enter your name"
          value={name}
          onChange={handleNameOnChange}
        />

        <InputGroup>
          <InputLeftElement
            pointerEvents="none"
            children={<PhoneIcon color="gray.300"/>}
          />
          <Input
            type="tel"
            placeholder="phone"
            value={phone}
            onChange={handlePhoneOnChange}
          />
        </InputGroup>

        <Button
          colorScheme="teal"
          onClick={() => signUp()}
        >
          Sign Up
        </Button>
      </Stack>

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

export default SignUp