import { FC, useEffect,
  //  useMemo, useState
   } from "react";
import { useSelector } from "react-redux";
// import { CanvasPanel } from "@/page/app/Module/CanvasPanel";
// import { ComponentsManager } from "@/page/app/Module/ComponentManager";
import {
  // isOpenBottomPanel,
  // isOpenDebugger,
  isOpenRightPanel,
} from "@/redux/config/configSelector";

import {
  // bottomPanelStyle,
  centerPanelStyle,
  contentStyle,
  editorContainerStyle,
  // messageWrapperStyle,
  middlePanelStyle,
  // modalStyle,
  navbarStyle,
  // waringIconStyle,
} from "./style";
// import LeftPanel from "./module/LeftPanel";
// import { ActionEditor } from "./module/ActionEditor";
import { PageNavBar } from "./module/PageNavBar";
import { CanvasPanel } from "./module/CanvasPanel";
import { useResize } from "./components/ScaleSquare/components/ResizingAndDragContainer/ResizeHandler/hooks";
// import ComponentPanel from "./components/ComponentPanel";
import { Unsubscribe } from "redux";
import { setupExecutionListeners } from "@/redux/currentApp/executionTree/executionListener";
import { startAppListening } from "@/store";
import { setupLayoutInfoListeners } from "@/redux/currentApp/layoutInfo/layoutInfoListener";
import { setupComponentsListeners } from "@/redux/currentApp/components/componentsListener";
import { setupConfigListeners } from "@/redux/config/configListener";
import ComponentsManager from "./module/ComponentManager";
import { TriggerProvider } from "@/utils/trigger/trigger-provider";
import LeftPanel from "./module/LeftPanel";
import { Shortcut } from "@/utils/shortcut";
// import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName";
// import { getClientWidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoSelector";

export const Editor: FC = () => {
  // const [renderCount,setRenderCount] = useState(0);
  const showRightPanel = useSelector(isOpenRightPanel);
  // const isEditMode = useSelector(getIsILLAEditMode);
  // const showBottomPanel = useSelector(isOpenBottomPanel);
  // const layout = useSelector(getClientWidgetLayoutInfo);
  const [, resizeDropRef] = useResize();
  useEffect(() => {
   
    const subscriptions: Unsubscribe[] = [
      setupExecutionListeners(startAppListening),
      setupLayoutInfoListeners(startAppListening),
      setupComponentsListeners(startAppListening),
      // setupActionListeners(startAppListening),
      setupConfigListeners(startAppListening),
      
    ];
    return () => subscriptions.forEach((unsubscribe) => unsubscribe());
  }, []);

  return (
    <Shortcut>
      <div css={editorContainerStyle} ref={resizeDropRef}>
        <PageNavBar css={navbarStyle} />
        <div css={contentStyle}>
          <LeftPanel />
          <div css={middlePanelStyle}>
            <CanvasPanel css={centerPanelStyle} />
          </div>

          {showRightPanel && (
            <TriggerProvider renderInBody zIndex={10}>
              <ComponentsManager />
            </TriggerProvider>
          )}
        </div>
      </div>
    </Shortcut>
  );
};

export default Editor;

Editor.displayName = "Editor";
