import React, { useState } from "react";
import "./Logout_Modal.css";
import Gray_Btn from "../../common_btn/gray_btn/Gray_Btn";
import { Modal } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { setIsSignedOut } from "../../../../features/auth/authSlice";
import Cookies from "js-cookie";
import { getAllCart } from "../../../../features/cart/cartSlice";
import { getAllWishlist } from "../../../../features/wishlist/wishlistSlice";
import Success_Modal from "../success_modal/Success_Modal";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faRightFromBracket, faXmark } from "@fortawesome/free-solid-svg-icons";

const Logout_Modal = (props) => {
  const dispatch = useDispatch();
  const navigate = useRouter();

  const [showSuccess, setShowSuccess] = useState(false);

  const handleCloseLogout = async () => {
    props?.onHide();
    setShowSuccess(true);

    Cookies.remove("gurukrupa_security");

    dispatch(setIsSignedOut());
    dispatch(getAllCart(false));
    dispatch(getAllWishlist());

    setTimeout(() => {
      setShowSuccess(false);
      navigate.push("/");
    }, 3000);
  };

  return (
    <>
      <Modal
        className="Logout_Modal"
        size="sm"
        {...props}
        centered
        backdrop="static"
      >
        <div className="logout_modal_content">
          <button
            type="button"
            className="logout_close"
            onClick={() => props?.onHide()}
          >
            <FontAwesomeIcon icon={faXmark} />
          </button>

          <div className="logout_icon_holder">
            <div className="logout_icon_circle">
              <FontAwesomeIcon icon={faRightFromBracket} />
            </div>
          </div>

          <div className="logout_text_content">
            <h4>Logout?</h4>

            <p>
              Are you sure you want to log out
              <br />
              from your account?
            </p>
          </div>

          <div className="logout_btn_holder">
            <button
              type="button"
              className="logout_cancel_btn"
              onClick={() => props?.onHide()}
            >
              Cancel
            </button>

            <button
              type="button"
              className="logout_confirm_btn"
              onClick={handleCloseLogout}
            >
              <FontAwesomeIcon icon={faRightFromBracket} />
              Yes, Logout
            </button>
          </div>
        </div>
      </Modal>

      <Success_Modal
        show={showSuccess}
        onHide={() => setShowSuccess(false)}
        successText="Logout Successful!"
      />
    </>
  );
};

export default Logout_Modal;
