/* eslint-disable @typescript-eslint/no-explicit-any */
// import 'react-native-get-random-values';
// import { v4 as uuidv4 } from 'uuid';

import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useDrop } from "react-dnd";
// import { useTranslation } from "react-i18next"
import { useDispatch, useSelector } from "react-redux";
import { newGenerateComponentNode } from "@/utils/generators/generateComponentNode";
import { ContainerEmptyState } from "@/widgetLibrary/ContainerWidget/emptyState";
import {
  DropCollectedProps,
  DropResultInfo,
  RenderComponentCanvasContainerProps,
} from "./interface";
import {
  ApplyComponentCanvas,
  applyComponentCanvasStyle,
  ComponentCanvasContainer,
  componentCanvasContainerStyle,
  DropZone,
  // containerShapeStyle,
  dropZoneStyle,
  OuterComponentCanvasContainer,
  outerComponentCanvasContainerStyle,
  selectoSelectionStyle,
} from "./style";
import {
  ADD_ROWS,
  DEFAULT_BODY_COLUMNS_NUMBER,
  SAFE_ROWS,
  SCROLL_CONTAINER_PADDING,
  UNIT_HEIGHT,
} from "../../constant/canvas";
import { getPaddingShape } from "../../utils/styleutils/padding";
import {
  DRAG_EFFECT,
  DragInfo,
} from "../../../scaleSquare/components/DragContainer/interface";
import { getLayoutInfosWithRelativeCombineShape } from "../../utils/getDropResult";
import { clamWidgetShape } from "../../utils/getDragShadow";
import { sendMousePositionHandler } from "../../utils/sendBinaryMessage";
import {
  removeScrollBarContainerControllerByDisplayName,
  setScrollBarContainerController,
} from "../../context/scrollBarContext";

import ComponentParser from "../ComponentParser/index";
import DragPreview from "../DragPreview";
import { View, Text, Platform } from "react-native";
import { isShowDot } from "@/redux/config/configSelector";
// import { componentsConfig } from "@/app/(tabs)";
import React from "react";
// import _ from "lodash"
import {
  getComponentMap,
} from "@/redux/currentApp/executionTree/executionSelector";

export const RenderComponentCanvasContainer: FC<
  RenderComponentCanvasContainerProps
> = (props) => {
  const {
    columnNumber = DEFAULT_BODY_COLUMNS_NUMBER,
    isRootCanvas,
    displayName,
    containerPadding,
    canResizeCanvas = false,
    safeRowNumber = SAFE_ROWS,
    minHeight,
    background,
    shadowSize = "none",
    handleUpdateHeight,
    isGridCanvas = false,
  } = props;
  const canShowDot = useSelector(isShowDot);
  const [canvasHeight, setCanvasHeight] = useState<number>(700);
  const componentMap = useSelector(getComponentMap);
  // const currentLayoutInfo = widgetLayoutInfo[displayName];
  const currentLayoutInfo = componentMap[displayName];

  const unitWidth = 12;

  return (
    <>
      {currentLayoutInfo?.childrenNode?.length > 0 && !isGridCanvas
        ? currentLayoutInfo?.childrenNode?.map((childName: any) => {
            return (
              // null
              <ComponentParser
                key={`${displayName}-${childName}`}
                displayName={childName}
                unitW={unitWidth}
                parentNodeDisplayName={displayName}
                columnNumber={columnNumber}
              />
            );
          })
        : isRootCanvas
        ? null
        : null
          // <ContainerEmptyState
          //     isInner
          //     containerPadding={containerPadding}
          // />
      }
    </>
  );
};

RenderComponentCanvasContainer.displayName = "RenderComponentCanvasContainer";
export default RenderComponentCanvasContainer;
