/* eslint-disable @typescript-eslint/no-explicit-any */
import { composePaths } from "@jsonforms/core";
import { DragSourceMonitor, useDrag, useDrop } from "react-dnd";
import { colorsProvider, moveNode } from "./TreeHelperComponents";
import { JsonFormsDispatch } from "@jsonforms/react";
import _, { uniqueId } from "lodash";
import { ComponentType, DragItem, SVGProps } from "./interface";
import { useEffect } from "react";
let globalColorHolder = {};
export const RenderSVGWithUISchemaElement = (props: SVGProps) => {
  const {
    x,
    
    y,
    
    height,
    width,
    node,
    setData,
    handleChange,
    setColorHolder,
    colorHolder,
    data,
    uischema,
    schema,
    renderers,
    path,
  } = props;
  const Colors = colorsProvider(uischema);
  useEffect(() => {
    if (Object.keys(colorHolder)?.length == 0) {
      globalColorHolder = {};
    }
  }, []);
  const { type, id } = node.data;
  const [
    { isDragging },
    drag,
    // preview
  ] = useDrag(
    () => ({
      type: ComponentType.component,
      item: () => {
        return { id: id, node, data: data };
      },
      collect: (monitor: DragSourceMonitor) => ({
        isDragging: monitor.isDragging(),
      }),
    }),
    []
  );
  const [, drop] = useDrop(
    () => ({
      accept: ComponentType.component,
      drop(item: DragItem) {
        setData((pre) => {
          const dataToUpdate = _.cloneDeep(pre);
          const newDTA = moveNode(dataToUpdate, id, item.id);
          handleChange(path, newDTA);
          return newDTA;
        });
      },
    }),
    []
  );

  return (
    <svg
      key={id}
      ref={drop}
      style={{
        cursor: "grab",
      }}
      x={x}
      y={y}
      width={width}
      height={height}
      xmlns="http://www.w3.org/2000/svg"
    >
      <foreignObject width={width} height={height}>
        <div
          ref={drag}
          key={id}
          id={uniqueId()}
          draggable={true}
          role="DraggableBox"
          style={{
            height: height,
            width: width,
            display: "flex",
            justifyContent: "flex-start",
            alignItems: "center",
          }}
        >
          {uischema?.elements?.map((elem, index) => {
            if (!globalColorHolder[type] && type !== "No_Data" && type) {
              globalColorHolder[type] =
                Colors[Object.keys(globalColorHolder).length];
            }
            setColorHolder(globalColorHolder);
            const widget = _.cloneDeep(elem);
            const childPath = `${path}${node.data.path.slice(1)}`;
            return (
              <div
                style={{
                  fontSize: "8px",
                  fontWeight: "bold",
                  opacity: isDragging ? 0.3 : 1,
                  background: globalColorHolder[type],
                  color: "white",
                  borderRadius: "5px",
                  height: "inherit",
                  width: "inherit",
                  ...uischema.config.style.BoxStyle,
                }}
              >
                <JsonFormsDispatch
                  schema={schema}
                  uischema={{ ...widget }}
                  path={childPath}
                  key={childPath}
                  renderers={renderers}
                />
              </div>
            );
          })}
        </div>
      </foreignObject>
    </svg>
  );
};