import React, { useEffect } from "react";
import { Outlet } from "react-router-dom";
import Header from "../components/Layout/Header";
import Sidebar from "../components/Layout/Sidebar";
import { startSignalR, stopSignalR } from "../services/signalRService";
import Footer from "../components/Layout/Footer";
import FloatingMenu from "../components/common/FloatingMenu";
import { FabProvider } from "../Context/FabContext";
import { useSelector } from "react-redux";

const HomeLayout = () => {
  const loggedUser = useSelector((store) => store.globalVariables.loginUser);
  useEffect(() => {
    Main();
  }, []);
  useEffect(() => {
    if (loggedUser) {
      startSignalR(loggedUser);
    }

    return () => {
      stopSignalR();
    };
  }, [loggedUser]);
  return (
    <FabProvider>
      <div className="layout-wrapper layout-content-navbar">
        <div className="layout-container">
          <Sidebar />
          <div className="layout-page ">
            <Header />
            <div className="content-wrapper">
              <Outlet />
              <Footer />
            </div>
          </div>
          <FloatingMenu />
          <div className="layout-overlay layout-menu-toggle"></div>
        </div>
      </div>
    </FabProvider>
  );
};

export default HomeLayout;