import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { loadUser } from "../../../redux/actions/userActions";
import { getVendorDetails } from "../../../redux/actions/vendorActions";
import { GenericHeader } from "./GenericHeader";
import { GenericSidebar } from "./GenericSidebar";
import { getActivitiesForAdmin } from "../../../redux/actions/activityAction";
import { useRouter } from "next/router";
import { ToastContainer } from "react-toastify";

export const GenericLayout = ({ children }) => {
  const dispatch = useDispatch();
  const router = useRouter();
  const [isRoute, setIsRoute] = useState("");
  useEffect(() => {
    const adminUri = router.pathname.includes("admin");
    const vendorUri = router.pathname.includes("vendor");
    setIsRoute(adminUri ? "admin" : vendorUri ? "vendor" : "");
    console.log("isRoute:", isRoute);
  }, [router.pathname]);
  useEffect(() => {
    dispatch(loadUser());
    dispatch(getVendorDetails());
    // dispatch(getActivitiesForAdmin({}));
  }, []);
  const { vendorDetails } = useSelector(state => state.vendorDetails);
  const { loadedUser } = useSelector(state => state.loadedUser);
  return (
    <div
      style={{
        height: "100vh",
        width: "100vw"
      }}
    >
      <GenericHeader
        venderBusiness={vendorDetails?.attributes?.businessName}
        venderEmail={vendorDetails?.attributes?.email}
        businessLogo={vendorDetails?.attributes?.brandLogo?.data?.attributes?.url}
        adminName={loadedUser?.username}
        adminEmail={loadedUser?.email}
        isRoute={isRoute}
      />
      <div
        className="w-100 d-flex"
        style={{
          height: "calc(100vh - 80px)"
        }}
      >
        <GenericSidebar isRoute={isRoute} />
        <ToastContainer position="bottom-right" />

        <div
          style={{
            width: "85%",
            overflowY: "auto"
          }}
        >
          {children}
        </div>
      </div>
    </div>
  );
};