import { Grid, Layout } from "antd";
import PageContent from "../PageContent";
import SideMenuDesktop from "../SideMenu/Desktop";
import SideMenuMobile from "../SideMenu/Mobile";
import { SideMenuContent, SideMenuEditorContent } from "../SideMenu";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setIsSideMenuCollapsed } from "../SideMenu/sideMenuSlice";
import { editorActive } from "../../../features/Lessons/LessonPageEditor/lessonPageEditorSlice";
import MyDndContext from "./MyDndContext";


const { useBreakpoint } = Grid;

export function SideMenu() {
  const screenBreakpoint = useBreakpoint();

  const dispatch = useDispatch();

  const isEditorActive = useSelector(editorActive);

  console.log("isEditorActive", isEditorActive);

  const Content = () => {
    return isEditorActive ? <SideMenuEditorContent /> : <SideMenuContent />;
  };

  useEffect(() => {
    dispatch(setIsSideMenuCollapsed(!screenBreakpoint.lg));
  }, [screenBreakpoint]);

  return (
    <>
      {screenBreakpoint.lg ? (
        <SideMenuDesktop>
          <Content />
        </SideMenuDesktop>
      ) : (
        <SideMenuMobile>
          <Content />
        </SideMenuMobile>
      )}
    </>
  );
}

export default function DashboardLayout() {
  return (
    <MyDndContext>
    <Layout style={{ minHeight: "100vh" }}>
      <Layout>
        <SideMenu />

        <PageContent />
      </Layout>
    </Layout>
    </MyDndContext>
  );
}