import {
  Box,
  FormControl,
  Text,
  FormLabel,
  Heading,
  Input,
  Button,
  Divider,
  Image,
} from "@chakra-ui/react";
import React, { useContext, useState } from "react";
import { useForm } from "react-hook-form";
import { BsEyeFill, BsFillEyeSlashFill } from "react-icons/bs";
import Link from "next/link";
import AppIcon from "@/components/AppIcon";
import { LoginContext } from "./LoginContext";

const LoginForm = () => {
  const {
    action: { loginWithGoogle },
    data: { isLoading },
  } = useContext(LoginContext);
  const {
    register,
    handleSubmit,
    formState: { isValid },
  } = useForm<Auth.Login>({
    mode: "onChange",
    reValidateMode: "onChange",
  });
  const [showPassword, setShowPassword] = useState(false);
  const onSubmit = (data: Auth.Login) => {
  };
  return (
    <Box>
      <Heading as='h2' fontSize='2xl' mb={6}>
        Login
      </Heading>
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* <FormControl id="email">
          <Input
            placeholder=" "
            type="email"
            disabled={isLoading}
            {...register("email", { required: true })}
          />
          <FormLabel>Email</FormLabel>
        </FormControl>
        <FormControl id="password" isInvalid>
          <Input
            placeholder=" "
            type={showPassword ? "text" : "password"}
            disabled={isLoading}
            {...register("password", { required: true })}
          />
          <FormLabel>Password</FormLabel>
          <Box
            as="span"
            className="icon-wrap"
            cursor="pointer"
            onClick={() => setShowPassword(!showPassword)}
          >
            {showPassword ? <BsFillEyeSlashFill /> : <BsEyeFill />}
          </Box>
        </FormControl>
        <Box
          my={6}
          textAlign="right"
        >
          <Text
            color="orange.100"
          >
            Lupa Password?
          </Text>
        </Box>
        <Button
          disabled={!isValid}
          type="submit"
          isLoading={isLoading}
        >Login</Button> */}
        {/* <Box position='relative' my={6} textAlign='center'>
          <Box
            position='absolute'
            height='1px'
            width='100%'
            backgroundColor='gray.600'
            top='50%'
          />
          <Text
            position='relative'
            as='span'
            color='gray.400'
            backgroundColor='white'
            textTransform='uppercase'
            px={2}
            fontSize='xs'>
            Atau
          </Text>
        </Box> */}
        <Image src='/assets/images/login.jpg'></Image>
        <Button variant='solid' onClick={loginWithGoogle}>
          <AppIcon src='icon-google' position='absolute' left={4} />
          Masuk dengan Google
        </Button>
        <Button variant='solid' onClick={loginWithGoogle} mt={5}>
          <AppIcon src='fecebook' position='absolute' left={4} />
          Masuk dengan Google
        </Button>
        <Button variant='solid' onClick={loginWithGoogle} mt={5}>
          <AppIcon src='icon-google' position='absolute' left={4} />
          Masuk dengan Apple
        </Button>
        {/* <Box mt={10} textAlign='center'>
          <Text fontWeight='medium'>
            Belum punya akun ?{" "}
            <Link href='/register' passHref>
              <Text color='orange.100' as='a'>
                Register
              </Text>
            </Link>
          </Text>
        </Box> */}
      </form>
    </Box>
  );
};

export default LoginForm;