/* eslint-disable @typescript-eslint/no-explicit-any */
// import { ILLA_MIXPANEL_EVENT_TYPE } from "@illa-public/mixpanel-utils"
import { FC } from "react";
import { useDrag } from "react-dnd";
import { useSelector } from "react-redux";
// import { DropResultInfo } from "@/page/app/components/DotPanel/components/Canvas/interface";
import { illaSnapshot } from "@/page/app/components/DotPanel/constant/snapshotNew";
import {
  sendMousePositionHandler,
  sendShadowMessageHandler,
} from "@/page/app/components/DotPanel/utils/sendBinaryMessage";
import {
  getIsILLAEditMode,
  getSelectedComponentDisplayNames,
} from "@/redux/config/configSelector";
import { getIsResizing } from "@/redux/currentApp/executionTree/executionSelector";
import { getClientWidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoSelector";
// import { WidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoState"
import store from "@/store";
import { endDragMultiNodes, startDragMultiNodes } from "@/utils/drag/drag";
import { DRAG_EFFECT, DragContainerProps,
  //  DragInfo
   } from "./interface";
import { dragContainerStyle } from "./style";
import { WidgetLayoutInfo } from "@/redux/currentApp/layoutInfo/layoutInfoState";

export const DragContainer: FC<DragContainerProps> = (props) => {
  const {
    children,
    displayName,
    canDrag = true,
    columnNumber,
    unitWidth,
    parentNodeDisplayName,
  } = props;
  const isEditMode = useSelector(getIsILLAEditMode);
  const isResizingStateInGlobal = useSelector(getIsResizing);
  const selectedComponents = useSelector(getSelectedComponentDisplayNames);
  const [, dragRef] = useDrag<any>(
  // DragInfo, DropResultInfo
    () => ({
      type: "components",
      canDrag: true,
      // isEditMode && canDrag && !isResizingStateInGlobal,
      end: (draggedItem,
        //  monitor
         ) => {
        // const dropResult =v monitor.getDropResult();
        sendShadowMessageHandler(-1, "", [], 0, 0, 0, 0, 0, 0, 0, 0);
        const { draggedComponents } = draggedItem;
        // const widgetTypes = draggedComponents.map((node) => node.widgetType)
        // trackInEditor(ILLA_MIXPANEL_EVENT_TYPE.DRAG, {
        //   element: "component",
        //   parameter1: widgetTypes,
        // })
        endDragMultiNodes(
          draggedComponents,
          true,
          // !!dropResult?.isDropOnCanvas,
          false
        );
      },
      item: () => {
        const rootState = store.getState();
        const allWidgetLayoutInfo: Record<string, WidgetLayoutInfo> | any =
          getClientWidgetLayoutInfo(rootState);
        illaSnapshot.setSnapshot(allWidgetLayoutInfo);
        const draggedSelectedComponents: WidgetLayoutInfo[] = [];
        let currentSelectedComponents = selectedComponents;
        if (!currentSelectedComponents.includes(displayName)) {
          currentSelectedComponents = [displayName];
        }
        const LayoutKeys: WidgetLayoutInfo[] =
          Object.values(allWidgetLayoutInfo);
        const draggedSelectedComponents2: WidgetLayoutInfo[] =
          LayoutKeys.filter(
            (node: WidgetLayoutInfo) =>
              currentSelectedComponents.includes(node.displayName) ||
              node.displayName === displayName
          );
        startDragMultiNodes(draggedSelectedComponents);
        sendMousePositionHandler(parentNodeDisplayName, 0, 0, 0, 0, true);
        return {
          draggedComponents:
            draggedSelectedComponents2 || draggedSelectedComponents,
          dragEffect: DRAG_EFFECT.UPDATE,
          draggedDisplayName: displayName,
          columnNumberWhenDragged: columnNumber,
          unitWWhenDragged: unitWidth,
        };
      },
    }),
    [
      isEditMode,
      isResizingStateInGlobal,
      selectedComponents,
      displayName,
      unitWidth,
      columnNumber,
      canDrag,
      parentNodeDisplayName,
    ]
  );

  return (
    <div css={dragContainerStyle} ref={dragRef}>
      {children}
    </div>
  );
};
