import React, { FC } from "react";
import { View } from "react-native";
import { useSelector } from "react-redux";
import RenderComponentCanvasContainer from "@/page/App/components/dotPanel/components/Canvas/renderComponentCanvasContainerMobile";
import { EmptyState } from "@/page/App/components/dotPanel/components/Page/emptyStateMobile";
import { BASIC_CANVAS_PADDING } from "@/page/App/components/dotPanel/constant/canvas";
import { getCurrentDisplayName } from "@/page/App/components/dotPanel/hooks/sectionUtils";
import { getIsIMPAKTProductMode } from "@/redux/config/configSelector";
import { getCurrentPageBodySection } from "@/redux/currentApp/executionTree/executionSelector";
import { containerWrapperStyle } from "../style";
import { RenderSectionProps } from "./interface";
import { bodySectionWrapperStyle } from "./style";

export const RenderBodySectionMobile: FC<RenderSectionProps> = (props) => {
  const { columnNumber, isGridCanvas } = props;
  const viewPath = "";
  const isProductionMode = useSelector(getIsIMPAKTProductMode);
  const bodySection = useSelector(getCurrentPageBodySection);
  if (!bodySection) return null;

  const {
    viewSortedKey,
    currentViewIndex,
    defaultViewKey,
    sectionViewConfigs,
    style,
  } = bodySection;
  const { padding, background = "white" } = style ?? {};
  const currentViewDisplayName = getCurrentDisplayName(
    sectionViewConfigs,
    viewSortedKey,
    defaultViewKey,
    isProductionMode,
    viewPath,
    currentViewIndex
  );

  const componentNode = bodySection.$childrenNode?.find(
    (node: string) => node === currentViewDisplayName
  );

  return (
    <View css={bodySectionWrapperStyle(background)}>
      <View css={containerWrapperStyle}>
        {componentNode ? (
          <RenderComponentCanvasContainer
            displayName={componentNode}
            containerPadding={padding?.size ?? `${BASIC_CANVAS_PADDING}`}
            columnNumber={columnNumber}
            isRootCanvas
            isGridCanvas={isGridCanvas}
          />
        ) : (
          <EmptyState />
        )}
      </View>
    </View>
  );
};

RenderBodySectionMobile.displayName = "RenderBodySectionMobile";
