import { FC, memo } from "react";
import { useSelector } from "react-redux";
import { getIsILLAEditMode, isShowDot } from "@/redux/config/configSelector";
import { getComponentMap } from "@/redux/currentApp/components/componentsSelector";
import { RootState } from "@/store";
import { ContainerEmptyState } from "@/widgetLibrary/ContainerWidget/emptyState";
import { IRenderChildrenCanvasProps } from "./interface";
import { ComponentMapNode } from "@/utils/generators/interface";
import RenderComponentCanvasContainer from "@/page/app/components/DotPanel/components/Canvas/renderComponentCanvasContainer";
import { LIKE_CONTAINER_WIDGET_PADDING } from "@/page/app/components/ScaleSquare/constant/widget";
import {
  SAFE_ROWS,
  UNIT_HEIGHT,
} from "@/page/app/components/DotPanel/constant/canvas";

export const RenderChildrenCanvas: FC<IRenderChildrenCanvasProps> = (props) => {
  const {
    // columnNumber,
    canResizeCanvas = false,
    handleUpdateHeight,
    containerPadding,
    displayName,
  } = props;
  const isEditMode = useSelector(getIsILLAEditMode);
  const canShowDots = useSelector(isShowDot);
  const targetNode = useSelector<RootState, ComponentMapNode>((state) => {
    const components = getComponentMap(state);
    return components[displayName];
  });

  const hasChildrenNode = targetNode?.childrenNode?.length > 0;

  if (isEditMode && ((!canShowDots && !hasChildrenNode) || !displayName)) {
    return (
      <ContainerEmptyState
        handleUpdateHeight={handleUpdateHeight}
        containerPadding={containerPadding}
      />
    );
  }

  return (
    <RenderComponentCanvasContainer
      displayName={displayName}
      containerPadding={
        containerPadding ?? `${LIKE_CONTAINER_WIDGET_PADDING}`
      }
      columnNumber={1}
      handleUpdateHeight={handleUpdateHeight}
      canResizeCanvas={false}
      safeRowNumber={SAFE_ROWS}
      minHeight={
         canResizeCanvas ? 13 * UNIT_HEIGHT :
        undefined
      }
      gridContainer={true}
    />
  );
};

// eslint-disable-next-line react-refresh/only-export-components
export default memo(RenderChildrenCanvas);
