import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
import { useContext, useState } from "react";
import { useForm } from "react-hook-form";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import logo from "../../assets/logo.svg";
import uiEdit from "../../assets/icons/edit.png";
import { Button } from "../../components/ui/button";
import { Field } from "../../components/ui/field";
import { Toaster, toaster } from "../../components/ui/toaster";
import { PinInput } from "../../components/ui/pin-input";
import { useNavigate } from "react-router-dom";

interface FormValues {
  mobileNumber: number;
}

const LoginOtp = () => {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const context = useContext(GlobalStateContext);
  const navigate = useNavigate();
  if (!context) {
    throw new Error("App must be used within a GlobalStateProvider");
  }
  const { setIsAuthenticate } = context;
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>();

  const onSubmit = handleSubmit((data) => {
    setIsLoading(true);
    if (data?.mobileNumber === 1234567890) {
      setTimeout(() => {
        setIsAuthenticate(true);
        setIsLoading(false);
      }, 3000); // 3-second delay
    } else {
      toaster.create({
        title: `Invalid Credentials`,
        type: "error",
      });
      setIsLoading(false);
    }
  });

  return (
    <VStack w={"100%"} h={"100vh"} bg={"#ffffff"}>
      <HStack
        boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
        w={"100%"}
        ps={8}
        h={"7%"}
        justifyContent={"flex-start"}
      >
        <Image w={50} src={logo} />
      </HStack>

      <HStack w={"100%"} h={"93%"} p={8} gap={8}>
        <Center
          display={{ base: "none", md: "flex" }}
          bg={"#02A0A033"}
          w={"50%"}
          h={"100%"}
          rounded={"3xl"}
        >
          <Image w={250} src={logo} />
        </Center>

        <Center
          as={"form"}
          onSubmit={onSubmit}
          p={{ base: 4, md: 16 }}
          w={{ base: "100%", md: "50%" }}
          h={"100%"}
        >
          <VStack gap={2} w={"100%"} alignItems={"center"}>
            <Text
              w={"100%"}
              textAlign={"center"}
              fontSize={"24px"}
              fontWeight={"normal"}
              color={"#313039"}
            >
              Enter otp
            </Text>
            <Text
              w={"100%"}
              textAlign={"center"}
              fontSize={"sm"}
              fontWeight={"normal"}
              color={"#49475A"}
            >
              OTP has been send to your E-mail Address
            </Text>
            <HStack>
              <Image src={uiEdit} h="24px" w="24px" />
              <Text
                w={"100%"}
                textAlign={"center"}
                fontSize={"sm"}
                fontWeight={"normal"}
                color={"#49475A"}
              >
                9619565889
              </Text>
            </HStack>

            <VStack mt={6} gap={4} w={"full"}>
              <PinInput />
              <Text
                w={"100%"}
                textAlign={"center"}
                fontSize={"sm"}
                fontWeight={"600"}
                color={"#4746F4"}
                textDecoration="underline"
              >
                Resend OTP
              </Text>
              <Button
                // loading={isLoading}
                mt={4}
                size={"sm"}
                bg={"#02A0A0"}
                rounded={"md"}
                w={"100%"}
                color={"#ffffff"}
                type="submit"
                onClick={navigate("/create-password")}
              >
                Send OTP
              </Button>

              <Text>Forgot password</Text>
            </VStack>
          </VStack>
        </Center>
        <Toaster />
      </HStack>
    </VStack>
  );
};

export default LoginOtp;
