/* eslint-disable @typescript-eslint/no-explicit-any */
import { FC, useContext } from "react";
import { useSelector, useStore } from "react-redux";
import {getIsIMPAKTEditMode
} from "@/redux/config/configSelector";

import { isCurrentNodeDisable } from "@/redux/currentApp/components/componentsSelector";
import { RootState } from "@/store";

import { ShortCutContext } from "@/utils/shortcut/shortcutProvider";
import { DragContainer } from "../DragContainer/index";

import { ResizingAndDragContainerProps } from "./interface";
import {
  DragContainerWrapper,
} from "./style";
import { DropList, DropListItem, Dropdown } from "@/utils/DropDown";
import { CopyManager } from "@/utils/copyManager";
import { t } from "i18next";
import { ContainerWidgets } from "@/widgetLibrary/widgetBuilder";
import theme from "@/theme";

export const ResizingAndDragContainer: FC<ResizingAndDragContainerProps> = (
  props
) => {
  const {
    unitW,
    displayName,
    children,
    widgetType,
    columnNumber,
    parentNodeDisplayName,
  } = props;
  const store = useStore();
  const isEditMode = useSelector(getIsIMPAKTEditMode);
  const shortcut = useContext(ShortCutContext);
  const canDrag = widgetType !== "MODAL_WIDGET";
  const actualWidth = "100%";
  const isDisabled = isCurrentNodeDisable(
    displayName,
    store.getState() as RootState
  );
  return (
    <div
      style={{
        display: isEditMode ? "flex" : "block",
        justifyContent: "center",
        background: "transparent",

        marginBottom: "2px",
      }}
    >
      <Dropdown
        disabled={!isEditMode || isDisabled}
        position="right-start"
        trigger="contextmenu"
        dropList={
          <DropList w="184px">
            <DropListItem
              value="duplicate"
              title={t("editor.context_menu.duplicate")}
              onClick={() => {
                CopyManager.copyComponentNodeByDisplayName(
                  [displayName],
                  store
                );
                CopyManager.paste("duplicate", store);
              }}
            />
            <DropListItem
              deleted
              value="delete"
              title={t("editor.context_menu.delete")}
              onClick={() => {
                shortcut.showDeleteDialog([displayName], "widget", {
                  source: "manage_delete",
                });
              }}
            />
          </DropList>
        }
      >
        <div
          data-displayname={displayName}
          data-parentnode={parentNodeDisplayName}
          // onClick={handleOnSelection}
          css={DragContainerWrapper(theme, isEditMode, actualWidth)}
        >
          <DragContainer
            displayName={displayName}
            parentNodeDisplayName={parentNodeDisplayName}
            canDrag={canDrag}
            unitWidth={unitW}
            columnNumber={columnNumber}
            isContainerWidget={ContainerWidgets.includes(widgetType)}
          >
            {children}
          </DragContainer>
        </div>
      </Dropdown>
    </div>
  );
};
