import { FC, useMemo } from "react";
import { useSelector } from "react-redux";
// import { useParams } from "react-router-dom";
import { applyViewportContainerWrapperStyle } from "./style";
import {
  getCanvasShape,
  getIsIMPAKTEditMode,
  getIsIMPAKTMode,
  getIsIMPAKTPreviewMode,
  getIsIMPAKTProductMode,
  getSelectedScreen,
} from "@/redux/config/configSelector";
import { getViewportSizeSelector } from "@/redux/currentApp/components/componentsSelector";
import { getRootNodeExecutionResult } from "@/redux/currentApp/executionTree/executionSelector";

import { RenderPage } from "./components/Page/renderPage";
import { MouseHoverProvider } from "./context/mouseHoverContext";
import { MouseMoveProvider } from "./context/mouseMoveContext";
import { ScreenPayload } from "@/redux/config/configState";
import { useTheme } from "@mui/material";
import { RenderBodySection } from "./components/Section/BodySection";
import { Platform } from "react-native";

export const DotPanel: FC = () => {
  const rootExecutionProps = useSelector(getRootNodeExecutionResult);
  const mode = useSelector(getIsIMPAKTMode);
  const isEditMode = useSelector(getIsIMPAKTEditMode);
  const canvasShape = useSelector(getCanvasShape);
  const Screen: ScreenPayload = useSelector(getSelectedScreen);
  const isProductionMode = useSelector(getIsIMPAKTProductMode);
  const viewportSize = useSelector(getViewportSizeSelector);
  const isPreviewMode = useSelector(getIsIMPAKTPreviewMode);
  const theme = useTheme();
  const { currentPageIndex, pageSortedKey, homepageDisplayName } =
    rootExecutionProps;
  // const { pageName } = useParams();
  const  pageName  = "";
  const currentDisplayName = useMemo(() => {
    if (isProductionMode) {
      return (
        pageName ||
        homepageDisplayName ||
        pageSortedKey[currentPageIndex] ||
        "page1"
      );
    } else {
      return pageSortedKey[currentPageIndex] || homepageDisplayName;
    }
  }, [
    currentPageIndex,
    homepageDisplayName,
    isProductionMode,
    pageName,
    pageSortedKey,
  ]);
  if (!rootExecutionProps) return null;
  const actualWidth = useMemo(() => {
    // console.log("parentNodeDisplayName >>", parentNodeDisplayName);
    if (!isEditMode) {
      return "100%";
    }
    return Screen == "Mobile"
      ? `${380}px`
      : Screen == "Tablet"
      ? `${800}px`
      : `${100}%`;
  }, [Screen, canvasShape.canvasWidth, isEditMode]);

  const DEFAULT_BODY_COLUMNS_NUMBER = 32

  
  if(Platform.OS === 'web'){
     return (
    <MouseHoverProvider>
      <MouseMoveProvider>
        <div
          css={applyViewportContainerWrapperStyle(
            mode,
            theme,
            isPreviewMode ? viewportSize.viewportWidth : actualWidth,
            isPreviewMode ? viewportSize.viewportHeight : undefined
          )}
        >
          <RenderPage
            key={currentDisplayName}
            currentPageDisplayName={currentDisplayName}
          />
        </div>
      </MouseMoveProvider>
    </MouseHoverProvider>
  );
  }
  else{
    return(
      <RenderBodySection
          columnNumber={ DEFAULT_BODY_COLUMNS_NUMBER}
      />
      
  )

  }
 
};

DotPanel.displayName = "DotPanel";
