import { Avatar, Skeleton } from "antd";
import Image from "next/image";
import { useRouter } from "next/router";
import { signOut } from "next-auth/react";
import { UserOutlined } from "@ant-design/icons";
import { ToastContainer } from "react-toastify";
import { useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { changeNotificationStatus, getNotifications } from "../../../redux/actions/notificationAction";
export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, adminName, adminEmail, isRoute }) => {
  const innersBoxRef = useRef(null); // Ref to hold reference to inner-box div
  const [isGridViewOpen, setIsGridViewOpen] = useState(false);
  const [isopen, setisopen] = useState(false);
  const { loadedUser } = useSelector(state => state.loadedUser);
  const { notifications } = useSelector(state => state.notifications);
  console.log("loadedUser", loadedUser);
  console.log("notifications", notifications);
  const dispatch = useDispatch();
  // Function to toggle the dropdown visibility
  const toggleGridViewDropdown = () => {
    if (isopen) {
      setIsGridViewOpen(false);
      setisopen(false);
    }
    if (!isopen) {
      setisopen(true);
      setIsGridViewOpen(true);
    }
    // Toggle the state
  };

  // Function to handle click outside
  const handleClickOutside = event => {
    if (innersBoxRef.current && !innersBoxRef.current.contains(event.target)) {
        // setTimeout(() => {
        //   setisopen(false);
        // }, 500);
      setIsGridViewOpen(false); // Close if clicked outside
    }
  };
  // Effect to add click event listener when component mounts
  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  useEffect(() => {
    loadedUser && dispatch(getNotifications({ id: loadedUser.id }));
  }, [loadedUser]);

  const router = useRouter();
  const VenderDetails = () => {
    return (
      <div>
        {!venderBusiness && !venderEmail ? (
          <div className="d-flex align-items-center gap-2">
            <Skeleton.Image active style={{ height: 50, width: 70 }} />
            <Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
          </div>
        ) : (
          <div className="d-flex align-items-center gap-3">
            <Image src={businessLogo} height={50} width={70} objectFit="contain" />
            <div className="d-flex flex-column">
              <p className="m-0">{venderBusiness}</p>
              <p className="m-0">{venderEmail}</p>
            </div>
          </div>
        )}
      </div>
    );
  };
  const AdminDetails = () => {
    return (
      <div>
        {!adminName && !adminEmail ? (
          <div className="d-flex align-items-center gap-2">
            <Skeleton.Avatar active size={40} />
            <Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
          </div>
        ) : (
          <div className="d-flex align-items-center gap-3">
            <Avatar icon={<UserOutlined />} active size={40} />
            <div className="d-flex flex-column">
              <p className="m-0">{adminName}</p>
              <p className="m-0">{adminEmail}</p>
            </div>
          </div>
        )}
      </div>
    );
  };

  return (
    <div
      className="bg-light px-5 d-flex align-items-center justify-content-between w-100"
      style={{
        height: 80,
        boxshadow: "0px 1px 9px -3px rgba(0,0,0,0.56)",
        "-webkit-box-shadow": "0px 1px 9px -3px rgba(0,0,0,0.56)",
        "-moz-box-shadow": "0px 4px 1px -3px rgba(0,0,0,0.56)"
      }}
    >
      <Image loading="lazy" objectFit="contain" height={50} width={100} alt="" className="" src="/images/main-logo.svg" />
      <div className="d-flex align-items-center gap-5">
        <div className="notification-row top-btn">
          <div onClick={toggleGridViewDropdown}>
            <img src="/images/icons/notification.svg" alt="" />
          </div>
          {notifications &&
                notifications.data.length > 0 &&<span className="batch-icon"></span>}
          <div ref={innersBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
            <div className="notification-inner">
              <div className="head">Notifications</div>
              {notifications &&
                notifications.data.length > 0 &&
                notifications.data.map(item => {
                  return (
                    <div className="inner">
                      <div className="disc">{item.attributes.title}</div>
                      <div className="disc">{item.attributes.text}</div>
                      <div
                        className="link"
                        onClick={async () => {
                          console.log("here", item.id);
                          await changeNotificationStatus({ id: item.id, status: "seen" });
                          dispatch(getNotifications({ id: loadedUser.id }));
                        }}
                      >
                        <a>Dismiss</a>
                      </div>
                    </div>
                  );
                })}
              {!(notifications && notifications.data.length > 0) && (
                <div className="head text-center mb-2" style={{ color: "grey" }}>
                  No recent notifications
                </div>
              )}
            </div>
          </div>
        </div>
        {isRoute === "vendor" && <VenderDetails />}
        {isRoute === "admin" && <AdminDetails />}
        <button
          className="btn btn-primary rounded-pill"
          style={{ height: 40 }}
          onClick={async () => {
            signOut({ redirect: false });
            await router.push("/");
            window.location.reload();
          }}
        >
          Logout
        </button>
      </div>
    </div>
  );
};