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,
} from '@chakra-ui/react'
import { PhoneIcon } from '@chakra-ui/icons'
import http from '../utils/http'

const SignUp = () => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [email, setEmail] = useState('')
  const [phone, setPhone] = useState('')

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

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

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

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

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

  return (
    <Container>
      <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}
        />


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

        <Button
          colorScheme="teal"
        >
          Sign Up
        </Button>
      </Stack>
    </Container>
  )
}

export default SignUp