// import IconHotSpot from "@IMPAKTAPPS-public/icon-hot-spot"
// import { IMPAKTAPPS_MIXPANEL_EVENT_TYPE } from "@IMPAKTAPPS-public/mixpanel-utils"
import { FC, useCallback, useState } from "react";
// import { useTranslation } from "react-i18next"
import { useSelector, useStore } from "react-redux";
// import { ReduceIcon, Trigger, useMessage } from "@IMPAKTAPPS-design/react"
import {
  getComponentMap,
  searchDSLByDisplayName,
} from "@/redux/currentApp/components/componentsSelector";
import { ItemProps } from "./interface";
import { LabelNameAndDragIcon } from "./labelName";
import { Modal } from "./modal";
import { itemWrapperStyle } from "./style";
import { Trigger } from "@/utils/trigger";
import RemoveIcon from "@mui/icons-material/Remove";
import { RootState } from "@/store";
export const Item: FC<ItemProps> = (props) => {
  const {
    otherPaths,
    index,
    handleDeleteSectionView,
    path,
    handleUpdateItem,
    attrPath,
    parentNodeDisplayName,
  } = props;
  const [modalVisible, setModalVisible] = useState(false);
  // const message = useMessage()
  const components = useSelector(getComponentMap);

  const isDuplicationPath = otherPaths.some((viewKey) => viewKey == path);

  const [currentPath, useCurrentPath] = useState(path);
  const store = useStore();
  // const { t } = useTranslation()

  const handleUpdatePath = useCallback(() => {
    if (currentPath === path) return;
    const sectionNode = searchDSLByDisplayName(parentNodeDisplayName,store.getState() as RootState);
    if (!sectionNode) return;
    const pageNode = searchDSLByDisplayName(sectionNode.parentNode!,store.getState() as RootState);
    if (!pageNode) return;
    let bodySectionPaths: string[] = [];
    if (sectionNode.showName !== "bodySection") {
      const bodySectionNode = pageNode.childrenNode.find(
        (node) => components[node].showName === "bodySection"
      );
      if (!bodySectionNode) return;
      bodySectionPaths =
        components[bodySectionNode].props?.sectionViewConfigs.map(
          (config: Record<string, string>) => config.path
        ) ?? [];
    }

    if (
      !bodySectionPaths.includes(currentPath) &&
      sectionNode.showName !== "bodySection"
    ) {
      // message.info({
      //   content: t("editor.page.message.new_path"),
      // })
    }

    handleUpdateItem(`${attrPath}.path`, currentPath);
  }, [
    attrPath,
    components,
    currentPath,
    handleUpdateItem,
    // message,
    parentNodeDisplayName,
    path,
    // t,
  ]);

  return (
    <Trigger
      withoutPadding
      colorScheme="white"
      popupVisible={modalVisible}
      content={
        <Modal
          onCloseModal={() => {
            setModalVisible(false);
          }}
          path={currentPath}
          handleUpdateItem={useCurrentPath}
        />
      }
      trigger="click"
      showArrow={false}
      position="left"
      clickOutsideToClose
      onVisibleChange={(visible) => {
        if (!visible) {
          handleUpdatePath();
        }
        setModalVisible(visible);
      }}
    >
      <div css={itemWrapperStyle}>
        <LabelNameAndDragIcon
          name={path}
          isDuplicationKey={isDuplicationPath}
        />
        <RemoveIcon
          onClick={(e) => {
            e.stopPropagation();
            handleDeleteSectionView(index);
          }}
          sx={{
            fontSize: "14px",
            color: "gray",
            ":hover": {
              color: "#654aec",
            },
          }}
        />
        {/* <IconHotSpot
          onClick={(e) => {
            e.stopPropagation()
            handleDeleteSectionView(index)
          }}
        >
          <ReduceIcon
            onClick={(e) => {
              e.stopPropagation()
              handleDeleteSectionView(index)
            }}
          />
        </IconHotSpot> */}
      </div>
    </Trigger>
  );
};
