import React, { useState } from "react";
import { Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
import Black_Btn from "../../common_btn/black_btn/Black_Btn";
import { UserLogin } from "../../../../features/auth/authSlice";
import { getAllWishlist } from "../../../../features/wishlist/wishlistSlice";
import { myAccount } from "../../../../features/my_account/Slice";
import { getAllCart } from "../../../../features/cart/cartSlice";
import { useDispatch, useSelector } from "react-redux";
import { RoleId } from "../../../../utils/common";

const Business_Login = ({ setAuthMode, onHide, setShowLogin }) => {
  const [showPassword, setShowPassword] = useState(false);

  const {
    register,
    handleSubmit,
    setError,
    formState: { errors },
  } = useForm();
  const dispatch = useDispatch();
  const isSignin = useSelector((state) => state.auth.is_signin);
  const onSubmit = async (data) => {
    data.role_id = RoleId.B2BCustomer;
    const res = await dispatch(UserLogin(data));
    if (res.meta?.requestStatus === "fulfilled") {
      dispatch(getAllCart(isSignin));
      dispatch(getAllWishlist());
      dispatch(myAccount());
      onHide();
      setShowLogin();
      // setTimeout(() => {
      //   // navigate("/home");
      // }, 3000);
    } else if (res.meta?.requestStatus === "rejected") {
      if (res.payload?.errors?.email_or_contact) {
        setError("email_or_contact", {
          type: "manual",
          message: res.payload?.errors?.email_or_contact,
        });
      }
      if (res.payload?.errors?.password) {
        setError("password", {
          type: "manual",
          message: res.payload?.errors?.password,
        });
      }
    }
  };

  return (
    <div className="login_div">
      <div className="login_form_div">
        <Form>
          <Form.Group className="gray_input_group input_group">
            <Form.Label>Email / Mobile Number</Form.Label>
            <Form.Control
              type="text"
              placeholder="Enter Company Email"
              {...register("email_or_contact", {
                required: "Email / Mobile Number is required",
              })}
            />
            {errors?.email_or_contact && (
              <sup className="text-danger">
                {errors.email_or_contact.message}
              </sup>
            )}
          </Form.Group>

          <Form.Group className="gray_input_group input_group">
            <Form.Label>Password</Form.Label>

            <div className="password_holder">
              <Form.Control
                type={showPassword ? "text" : "password"}
                placeholder="Enter Password"
                {...register("password", {
                  required: "Password is required",
                })}
              />

              <div className="eye-icc">
                <FontAwesomeIcon
                  icon={showPassword ? faEye : faEyeSlash}
                  className="icon"
                  onClick={() => setShowPassword(!showPassword)}
                />
              </div>
            </div>

            {errors?.password && (
              <sup className="text-danger">{errors.password.message}</sup>
            )}
            <p
              className="link_text"
              //   onClick={() => {
              //     props?.onHide();
              //     props?.setShowResetModal();
              //   }}
            >
              Forgot Password?
            </p>
          </Form.Group>
        </Form>
      </div>

      <div className="btn_holder">
        <Black_Btn btnText="B2B Login" onClick={handleSubmit(onSubmit)} />
      </div>
      <p className="dark_text">
        Don't have a business account?{" "}
        <span
          className="link_text"
          onClick={() => {
            setAuthMode(true);
          }}
        >
          Create Account
        </span>
      </p>
    </div>
  );
};

export default Business_Login;
