import { FC, useEffect } from "react";
import { useSelector } from "react-redux";
import {
  isOpenBottomPanel,
  isOpenDebugger,
  isOpenLeftPanel,
  isOpenRightPanel,
  // isOpenScreenPanel,
  isOpenStylePanel,
  isOpenThemePanel,
} from "@/redux/config/configSelector";
import {
  centerPanelStyle,
  contentStyle,
  editorContainerStyle,
  middlePanelStyle,
  navbarStyle,
} from "./style";
import 'react-native-get-random-values'
import { PageNavBar } from "./module/PageNavBar";
import { CanvasPanel } from "./module/CanvasPanel";

import { Unsubscribe } from "redux";
import { setupExecutionListeners } from "@/redux/currentApp/executionTree/executionListener";
import { startAppListening } from "@/store";
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 { ActionEditor } from "./module/ActionEditor";
import { useInitBuilderApp } from "@/hooks/useInitApp";
import CircularProgress from "@mui/material/CircularProgress";
import { Backdrop, useTheme } from "@mui/material";
import { setupActionListeners } from "@/redux/currentApp/action/actionListener";
import { StyleEditor } from "./module/StyleEditor";
import { ThemeEditor } from "./module/ThemeEditor";
import { ImpaktProps } from "@/lib";
import 'regenerator-runtime/runtime';
import { loginFinal5 } from "@/app/(tabs)";
// import { useParams } from "react-router-dom";
//  import "@/i18n/config";

// import { ScreenEditor } from "./module/ScreenEditor";
// import ModelProps from "@/utils/modelProvider/interface";
export const Editor: FC<ImpaktProps> = (props) => {
  const showRightPanel = useSelector(isOpenRightPanel);
  const showBottomPanel = useSelector(isOpenBottomPanel);
  const showDebugger = useSelector(isOpenDebugger);
  const showStyle = useSelector(isOpenStylePanel);
  const theme = useTheme()
  // const { id } = useParams();
  const isOpenTheme = useSelector(isOpenThemePanel);
  const showLeftPanel = useSelector(isOpenLeftPanel);

  useEffect(() => {
    const subscriptions: Unsubscribe[] = [
      setupComponentsListeners(startAppListening),
      setupActionListeners(startAppListening),
      setupConfigListeners(startAppListening),
      setupExecutionListeners(startAppListening),
    ];  
    return () => subscriptions.forEach((unsubscribe) => unsubscribe());
  }, []); 
  const { loadingState } = useInitBuilderApp("edit", props);
  return (
    <>
      <Backdrop
        sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={loadingState}
      >
        <CircularProgress color="secondary" />
      </Backdrop>
      {!loadingState && (<div css={editorContainerStyle} >
        <Shortcut>
          <TriggerProvider renderInBody zIndex={10}>
            <PageNavBar css={navbarStyle} {...props} />
          </TriggerProvider>
          <div css={contentStyle}>
            {showLeftPanel ? <LeftPanel /> : null}
            <div css={middlePanelStyle(theme)}>
              <TriggerProvider renderInBody zIndex={10}>
                <CanvasPanel css={centerPanelStyle} />
              </TriggerProvider>
              <TriggerProvider renderInBody zIndex={10}>
                {showBottomPanel && !showDebugger ? (
                  <ActionEditor />
                ) : null}
                {/* {showBottomPanel && showStyle ? <StyleEditor /> : null} */}
              </TriggerProvider>
            </div>

            {showRightPanel && (
              <TriggerProvider renderInBody zIndex={10}>
                <ComponentsManager />
              </TriggerProvider>
            )}
            {isOpenTheme && <ThemeEditor />}
            {/* {isOpenScreen && <ScreenEditor />}  */}
          </div>
        </Shortcut>
      </div>)}
    </>
  );
};

export default Editor;

Editor.displayName = "Editor";
