import React, { useEffect, useState } from "react";
import "./Logout_Modal.css";
import Orange_Btn from "../../common_btn/orange_btn/Orange_Btn";
import Gray_Btn from "../../common_btn/gray_btn/Gray_Btn";
import { Modal } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { logout, 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 Success_Modal_LogOut from "../success_modal/Success_Modal_logOut";
import Green_btn from "../../common_btn/green_btn/Green_btn";
import { appSetup } from "../../../../features/master/masterSlice";
import { useRouter } from "next/navigation";
const Logout_Modal = (props) => {
  const dispatch = useDispatch();
  const navigate = useRouter();
  const isSignin = useSelector((state) => state.auth.is_signin);

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

  const handleCloseLogout = async () => {
    // 1️⃣ Immediately show success modal
    setShowSuccess(true);

    // 2️⃣ Remove token and reset data
    Cookies.remove("gurukrupa_security");
    dispatch(setIsSignedOut());
    dispatch(getAllCart(false));
    dispatch(getAllWishlist());

    // 4️⃣ Close success modal and navigate after delay
    setTimeout(() => {
      setShowSuccess(false);
      navigate.push("/");
    }, 2000);
  };


  const app_setup = useSelector((state) => state.master.app_setup);

  return (
    <>
      <Modal className="Logout_Modal" {...props} centered>
        <div className="logo_holder theme_bg_secondary_colour">
          <img
            // src="/assets/images/logo/new_ekansi_logo.png"
            src={process.env.NEXT_PUBLIC_IMG_URL + app_setup?.logo}
            className="logo_img"
          />
        </div>
        <Modal.Body>
          <p className="modal_title">Are you sure </p>
          <p className="modal_title">you want to log out?</p>

          <div className="btn_holder">
            <Gray_Btn
              btnText={"No"}
              onClick={() => {
                props?.onHide();
              }}
            />
            <Green_btn
              btnText="Yes"
              onClick={() => {
                handleCloseLogout();
              }}
            />
          </div>
        </Modal.Body>
      </Modal>
      <Success_Modal_LogOut
        show={showSuccess}
        onHide={() => {
          setShowSuccess(false);
        }}
        successText="LogOut Successful!"
      />
    </>
  );
};

export default Logout_Modal;
