"use client";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faEnvelope,
  faLock,
  faEye,
  faEyeSlash,
} from "@fortawesome/free-solid-svg-icons";
import { useEffect, useState } from "react";
import PreLoginLayout from "@/layouts/preLoginLayout";
// @ts-ignore
import style from "../../../styles/login.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/redux/store";
import { userLogin } from "@/redux/(Retailer)/UserAuth/loginSlice";
import { useRouter } from "next/navigation";

export default function Login() {
  const router = useRouter();
  const { isSuccess, loading, error } = useSelector(
    (state: RootState) => state.retailerAuth
  );
  const dispatch: AppDispatch = useDispatch();
  const [userData, setUserData] = useState({
    email: "",
    password: "",
  });
  const [isShowPass, setIsShowPass] = useState(false);

  useEffect(() => {
    if (isSuccess) {
      router.push("/retailer/quotation/new");
    } else if (error) {
      console.error("Login error:", error);
    }
  }, [isSuccess, error]);

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setUserData((prevUserData) => ({
      ...prevUserData,
      [name]: value,
    }));
  };
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!userData.email || !userData.password) {
      // toast.error("Please fill Email and Password");
      console.log("error");
      return;
    }

    dispatch(userLogin(userData))
      .then(() => {
        console.log("success");
        localStorage.clear();
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <PreLoginLayout type={"retailer"}>
      <form className={style.login_container} onSubmit={handleSubmit}>
        <span className={style.heading}>Login</span>
        <div className={style.form_container}>
          <div className="input_form">
            <label className="preloginLabel">Email</label>
            <div className="input_with_icons">
              <FontAwesomeIcon className="icon-start" icon={faEnvelope} />
              <input
                placeholder="abc@gmail.com"
                name="email"
                type="text"
                value={userData.email}
                onChange={handleOnChange}
                required
              />
            </div>
          </div>
          <div className="input_form">
            <label>Password</label>
            <div className="input_with_icons">
              <FontAwesomeIcon icon={faLock} className="icon-start" />
              <input
                type={isShowPass ? "text" : "password"}
                placeholder="*******"
                name="password"
                required
                onChange={handleOnChange}
                value={userData.password}
              />
              <FontAwesomeIcon
                icon={isShowPass ? faEyeSlash : faEye}
                className="icon-end"
                type="button"
                onClick={() => {
                  setIsShowPass(!isShowPass);
                }}
              />
            </div>
          </div>

          <button type="submit" className={style.loginBtn} disabled={loading}>
            {loading ? "Loading..." : "Login"}
          </button>
        </div>
      </form>
    </PreLoginLayout>
  );
}