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

const LoginWithPass = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const context = useContext(GlobalStateContext);
  const navigate = useNavigate();

  if (!context) {
    throw new Error("App must be used within a GlobalStateProvider");
  }

  const { setIsAuthenticate } = context;

  const onSubmit = (data: { mobileNumber: string; password: string }) => {
    const { mobileNumber, password } = data;

    if (mobileNumber === "1231239870" && password === "admin@123") {
      navigate("/");
      setIsAuthenticate(true);
    } else {
      toaster.create({
        title: "Invalid Credentials",
        type: "error",
      });
    }
  };

  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"}
          p={{ base: 4, md: 16 }}
          w={{ base: "100%", md: "50%" }}
          h={"100%"}
          onSubmit={handleSubmit(onSubmit)}
        >
          <VStack gap={2} w={"100%"} alignItems={"flex-start"}>
            <Text
              w={"100%"}
              textAlign={"center"}
              fontSize={"24px"}
              fontWeight={"normal"}
              color={"#313039"}
              textTransform={"uppercase"}
            >
              LogIn
            </Text>

            <VStack mt={6} gap={4} w={"full"}>
              <Field color={"#313039"} label={"Enter Mobile Number"} w={"100%"}>
                <Input
                  ps={3}
                  type="text"
                  {...register("mobileNumber", {
                    required: "Mobile Number is required",
                    minLength: {
                      value: 10,
                      message: "Mobile Number must be 10 digits long",
                    },
                    maxLength: {
                      value: 10,
                      message: "Mobile Number must be 10 digits long",
                    },
                  })}
                  placeholder="Enter your mobile number"
                />
                {errors.mobileNumber && (
                  <Text fontSize={"xs"} color={"red.500"}>
                    {errors.mobileNumber.message}
                  </Text>
                )}
              </Field>

              <Field color={"#313039"} label={"Enter Password"} w={"100%"}>
                <Input
                  ps={3}
                  type="password"
                  {...register("password", {
                    required: "Password is required",
                    minLength: {
                      value: 6,
                      message: "Password must be at least 6 characters long",
                    },
                  })}
                  placeholder="Enter your password"
                />
                {errors.password && (
                  <Text fontSize={"xs"} color={"red.500"}>
                    {errors.password.message}
                  </Text>
                )}
                <NavLink to="/forgotPassword">
                  <Text
                    cursor="pointer"
                    as={"span"}
                    w={"100%"}
                    fontSize={"xs"}
                    fontWeight={"normal"}
                    color={"#686677"}
                  >
                    Forget password
                  </Text>
                </NavLink>
              </Field>

              <Button
                mt={4}
                size={"sm"}
                bg={"#02A0A0"}
                rounded={"md"}
                w={"100%"}
                color={"#ffffff"}
                type="submit"
                textTransform="capitalize"
              >
                Confirm Password
              </Button>
            </VStack>
          </VStack>
        </Center>
        <Toaster />
      </HStack>
    </VStack>
  );
};

export default LoginWithPass;
