/* eslint-disable @typescript-eslint/no-explicit-any */
import { FC, useEffect } from "react";
import {
  centerPanelStyle,
  editorContainerStyle,
  middlePanelStyle,
} from "./page/App/style";
import { CanvasPanel } from "./page/App/module/CanvasPanel";
import { Unsubscribe } from "redux";
import { startAppListening } from "./store";
import { setupComponentsListeners } from "./redux/currentApp/components/componentsListener";
import { setupExecutionListeners } from "./redux/currentApp/executionTree/executionListener";
import { TriggerProvider } from "./utils/trigger";
import {  useInitBuilderApp } from "./hooks/useInitApp";
import { setupActionListeners } from "./redux/currentApp/action/actionListener";
import { NotificationGroup } from "./utils/Notification";
import { ImpaktProps } from "./lib";
// import { useParams } from "react-router-dom";
import { useTheme } from "@mui/material";
const DeployContent: FC<ImpaktProps> = (props) => {
  // const { id } = useParams();
  const theme = useTheme()
  useEffect(() => {
    const subscriptions: Unsubscribe[] = [
      setupComponentsListeners(startAppListening),
      setupActionListeners(startAppListening),
      setupExecutionListeners(startAppListening),
    ];
    return () => subscriptions.forEach((unsubscribe) => unsubscribe());
  }, []);

 const {loadingState} =useInitBuilderApp("production",props);
  return (
    <>
      <div css={editorContainerStyle} >
         <NotificationGroup pt={"1px"} />
        <div css={middlePanelStyle(theme)}>
         {loadingState ?null: <TriggerProvider renderInBody zIndex={10}>
            <CanvasPanel css={centerPanelStyle} />
          </TriggerProvider>
          }
        </div>
      </div>
     
    </>
  );
};
export default DeployContent;
