"use client";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { login, signUpAdmin } from "../store/adminSlice";
import Input from "../extra/Input";
import Logo from "../assets/images/mainLogo.png";
import LogoBg from "../assets/images/bg.png";
// import LoginImg from "../assets/images/login.png";
import LoginImg from "../assets/images/login2.png";
import Image from "next/image";
import Button from "../extra/Button";
import { projectName } from "../util/config";
import { useRouter } from "next/router";
import { toast } from "react-toastify";
import { IconEye, IconEyeOff } from "@tabler/icons-react";

export default function Registration() {
  const dispatch = useDispatch();
  const { isAuth, admin } = useSelector((state) => state.admin);
  const router = useRouter();

  useEffect(() => {}, [isAuth, admin]);

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [code, setCode] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const [error, setError] = useState({
    email: "",
    password: "",
    newPassword: "",
    code: "",
  });

  const handleSubmit = () => {
    if (
      !email ||
      !password ||
      !code ||
      !newPassword ||
      newPassword !== password
    ) {
      let errorObj = {};
      if (!email) errorObj = { ...errorObj, email: "Email Is Required !" };
      if (!password)
        errorObj = { ...errorObj, password: "Password is required !" };
      if (!newPassword)
        errorObj = {
          ...errorObj,
          newPassword: "Confirm Password is required !",
        };

      if (newPassword !== password)
        errorObj = {
          ...errorObj,
          newPassword: "New Password and Confirm Password doesn't match !",
        };
      if (!code)
        errorObj = { ...errorObj, code: "Purchase code is required !" };
      return setError(errorObj);
    } else {
      setIsLoading(true);

      let payload = {
        email,
        newPassword,
        password,
        code,
      };

      dispatch(signUpAdmin(payload))
        .then((res) => {
          setIsLoading(false);
          if (res?.payload?.status) {
            // toast.success(res?.payload?.message);
            router.push("/");
          }
        })
        .catch((err) => {
          console.log(err);
          setIsLoading(false);
        });
    }
  };

  const handleKeyPress = (event) => {
    if (event.key === "Enter") {
      event.preventDefault();
      handleSubmit();
    }
  };
  const handleredirecttoForgotPassword = () => {
    router.push({
      pathname: "/forgotPassword",
    });
  };

  const [type, setType] = useState("text");
  const hideShow = () => {
    type === "password" ? setType("text") : setType("password");
  };

  return (
    <div className=" d-flex " style={{ height: "100vh" }}>
      <div className=" d-md-block d-none  w-100">
        <Image src={LoginImg} alt="Login" className=" w-100 h-100" />
      </div>
      <div className=" w-100">
        <div className="align-items-center d-flex h-100 justify-content-center w-100">
          <div className="w-50">
            <div>
              <Image
                src={Logo}
                alt="Logo"
                className="mb-2"
                height={75}
                width={75}
              />
            </div>
            <h2 className="fw-semibold">Sign Up to your account</h2>
            <p className="text-secondary">
              Let's connect, chat, and spark real connections. Enter your
              credentials to continue your journey on {projectName}.
            </p>
            <Input
              label={`Email`}
              placeholder={"Enter Email"}
              id={`loginEmail`}
              type={`email`}
              value={email}
              errorMessage={error.email && error.email}
              onChange={(e) => {
                setEmail(e.target.value);
                if (!e.target.value) {
                  return setError({
                    ...error,
                    email: `Email Is Required`,
                  });
                } else {
                  return setError({
                    ...error,
                    email: "",
                  });
                }
              }}
            />
            <div className="custom-input">
              <label>Password</label>
              <div className="input-group">
                <input
                  type={type}
                  value={password}
                  className="form-control border border-end-0 password-input"
                  placeholder="Enter Password"
                  onChange={(e) => {
                    setPassword(e.target.value);
                    if (!e.target.value) {
                      return setError({
                        ...error,
                        password: `Password Is Required`,
                      });
                    } else {
                      return setError({
                        ...error,
                        password: "",
                      });
                    }
                  }}
                />
                <span
                  className="input-group-text border border-start-0"
                  id="basic-addon2"
                >
                  {type === "password" ? (
                    <IconEye
                      onClick={hideShow}
                      className="text-secondary cursor-pointer"
                    />
                  ) : (
                    <IconEyeOff
                      onClick={hideShow}
                      className="text-secondary cursor-pointer"
                    />
                  )}
                </span>
              </div>
              <p className="errorMessage">{error.password && error.password}</p>
            </div>
            <div className="custom-input">
              <label>Confirm Password</label>
              <div className="input-group">
                <input
                  type={type}
                  value={newPassword}
                  className="form-control border border-end-0 password-input"
                  placeholder="Enter Confirm Password"
                  onChange={(e) => {
                    setNewPassword(e.target.value);
                    if (!e.target.value) {
                      return setError({
                        ...error,
                        newPassword: `Confirm Password Is Required`,
                      });
                    } else {
                      return setError({
                        ...error,
                        newPassword: "",
                      });
                    }
                  }}
                />
                <span
                  className="input-group-text border border-start-0"
                  id="basic-addon2"
                >
                  {type === "password" ? (
                    <IconEye
                      onClick={hideShow}
                      className="text-secondary cursor-pointer"
                    />
                  ) : (
                    <IconEyeOff
                      onClick={hideShow}
                      className="text-secondary cursor-pointer"
                    />
                  )}
                </span>
              </div>
              <p className="errorMessage">
                {error.newPassword && error.newPassword}
              </p>
            </div>

            <Input
              label={`Purachse Code`}
              id={`loginpurachse Code`}
              type={`text`}
              placeholder={"Enter purachse code"}
              value={code}
              errorMessage={error.code && error.code}
              onChange={(e) => {
                setCode(e.target.value);
                if (!e.target.value) {
                  return setError({
                    ...error,
                    code: `code Is Required`,
                  });
                } else {
                  return setError({
                    ...error,
                    code: "",
                  });
                }
              }}
            />
            <div className="d-flex flex-column justify-content-center w-100 gap-3 mt-4">
              <Button
                btnName={"Sign Up"}
                newClass={"login-btn login-button login w-100 py-2 fw-medium"}
                onClick={handleSubmit}
                style={{
                  backgroundColor: "#FE0952",
                  cursor: "not-allowed !important",
                }}
                disabled={isLoading}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
