import { FC } from "react"
import { useSelector } from "react-redux"
// import { useParams } from "react-router-dom"
import RenderComponentCanvasContainer from "@/page/App/components/dotPanel/components/Canvas/renderComponentCanvasContainer"
import { EmptyState } from "@/page/App/components/dotPanel/components/Page/emptyState"
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 { ContainerWrapper, containerWrapperStyle } from "../style"
import { RenderSectionProps } from "./interface"
import { bodySectionWrapperStyle, Container } from "./style"
import { useTheme } from "@mui/material"
import { Platform } from "react-native"
import RenderComponentCanvasContainerMobile from "../../Canvas/renderComponentCanvasContainerMobile"

export const RenderBodySection: FC<RenderSectionProps> = (props) => {
  const { columnNumber,isGridCanvas} = props
  // const { viewPath } = useParams()
  const  viewPath  = "";
  const isProductionMode = useSelector(getIsIMPAKTProductMode)
  const bodySection = useSelector(getCurrentPageBodySection)
  const theme = useTheme()
  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,
  )

  if(Platform.OS === 'web'){
    return (
      <div css={bodySectionWrapperStyle(background)}>
        <div css={containerWrapperStyle}>
          {componentNode ? (
            
            <RenderComponentCanvasContainer
              displayName={componentNode}
              containerPadding={padding?.size ?? `${BASIC_CANVAS_PADDING}`}
              columnNumber={columnNumber}
              isRootCanvas
              isGridCanvas={isGridCanvas}
            />
          ) : (
            <EmptyState />
          )}
        </div>
      </div>
    )
  }else{
    return(
      <Container background={background}>
        <ContainerWrapper>
          {componentNode ? (
            
            <RenderComponentCanvasContainerMobile
              displayName={componentNode}
              containerPadding={padding?.size ?? `${BASIC_CANVAS_PADDING}`}
              columnNumber={columnNumber}
              isRootCanvas
              isGridCanvas={isGridCanvas}
            />
          ) : (
            <EmptyState />
          )}
        </ContainerWrapper>
      </Container>
    )
  }
  
}

RenderBodySection.displayName = "RenderBodySection"
