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";
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);
  // 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);
    };
  }, []);
  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>
          <div ref={innersBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
            <div className="notification-inner">
              <div className="head">Notifications</div>
              <div className="inner">
                <div className="disc">Your Account is been verified you can start adding activities now.</div>
                <div className="link">
                  <a href="">Add Activity</a>
                </div>
              </div>
              <div className="inner">
                <div className="disc">Your Account is been verified you can start adding activities now.</div>
                <div className="link">
                  <a href="">Add Activity</a>
                </div>
              </div>
              <div className="inner">
                <div className="disc">Your Account is been verified you can start adding activities now.</div>
                <div className="link">
                  <a href="">Add Activity</a>
                </div>
              </div>
              <div className="inner">
                <div className="disc">Your Account is been verified you can start adding activities now.</div>
                <div className="link">
                  <a href="">Add Activity</a>
                </div>
              </div>
              <div className="inner">
                <div className="disc">Your Account is been verified you can start adding activities now.</div>
                <div className="link">
                  <a href="">Add Activity</a>
                </div>
              </div>
              <div className="inner">
                <div className="disc">Your Account is been verified you can start adding activities now.</div>
                <div className="link">
                  <a href="">Add Activity</a>
                </div>
              </div>
              <div className="inner">
                <div className="disc">Your Account is been verified you can start adding activities now.</div>
                <div className="link">
                  <a href="">Add Activity</a>
                </div>
              </div>
              <div className="inner">
                <div className="disc">Your Account is been verified you can start adding activities now.</div>
                <div className="link">
                  <a href="">Add Activity</a>
                </div>
              </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>
  );
};