import { forwardRef } from "react";
import { useSelector } from "react-redux";
import {
  getIsIMPAKTEditMode,
  getIsIMPAKTPreviewMode,
} from "@/redux/config/configSelector";
import { CanvasPanelProps } from "./interface";
import { applyScaleContainerStyle, Container } from "./style";
import { DotPanel } from "../../components/dotPanel";
import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector";
import { useTheme } from "@mui/material";
import { Platform } from "react-native";

export const CanvasPanel = forwardRef<HTMLDivElement, CanvasPanelProps>(
  (props, ref) => {
      const theme = useTheme();
    const { ...otherProps } = props;
    const isEditMode = useSelector(getIsIMPAKTEditMode);
    const isEditPreviewMode = useSelector(getIsIMPAKTPreviewMode);
    const executionResult = useSelector(getExecutionResult);
    if (!executionResult || !executionResult.root) {
      return null;
    }

    if (Platform.OS === 'web') {
      return (
        <div
          {...otherProps}
          ref={ref}
          css={applyScaleContainerStyle(isEditPreviewMode, isEditMode,theme)}
        >
          <DotPanel/>
        </div>
      )
    }
    else {
      return (
        // <View  {...otherProps} style={applyScaleContainerStyle(isEditPreviewMode, isEditMode)}>
        //   <DotPanel />
        // </View>
        <Container isEditorPreview={false} isEditorMode={false}        >
          <DotPanel/>
        </Container>
      )
    }
  }
);

CanvasPanel.displayName = "CanvasPanel";
