/* eslint-disable @typescript-eslint/no-explicit-any */
// import { IMPAKTAPPS_MIXPANEL_EVENT_TYPE } from "@IMPAKTAPPS-public/mixpanel-utils"
// import { SectionViewShape } from "@IMPAKTAPPS-public/public-types"
import { klona } from "klona/json";
import { set } from "lodash-es";
import { FC, useCallback, } from "react";
import { useDispatch } from "react-redux";
import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
import { BodyProps } from "./interface";
import { Item } from "./item";
import { viewsListBodyWrapperStyle } from "./style";
import { SectionViewShape } from "@/redux/utils";

export const ListBody: FC<BodyProps> = (props) => {
  const {
    sectionViewConfigs,
    viewSortedKey,
    parentNodeDisplayName,
    sectionName,
  } = props;
  const dispatch = useDispatch();
  const handleDeleteSectionView = useCallback(
    (index: number) => {
      if (index > sectionViewConfigs.length) return;
      // const config = sectionViewConfigs[index] as SectionViewShape;
      // const viewDisplayName = config.viewDisplayName;
      // shortcut.showDeleteDialog([config.path], "pageView", {
      //   parentNodeName: parentNodeDisplayName,
      //   originPageSortedKey: viewSortedKey,
      //   viewDisplayName: viewDisplayName,
      // });
      // if (index > sectionViewConfigs.length) return
      // const config = sectionViewConfigs[index] as SectionViewShape
      // const viewDisplayName = config.viewDisplayName
      // dispatch(
      //   componentsActions.deleteSectionViewReducer({
      //     viewDisplayName: viewDisplayName,
      //     parentNodeName: parentNodeDisplayName,
      //     originPageSortedKey: viewSortedKey,
      //   }),
      // )
    },
    [sectionViewConfigs]
  );

  const handleUpdateItem = useCallback(
    (path: string, value: string) => {
      const newSectionViewConfigs = klona(sectionViewConfigs);
      set(newSectionViewConfigs, path, value);
      dispatch(
        componentsActions.updateSectionViewPropsReducer({
          parentNodeName: parentNodeDisplayName,
          newProps: {
            sectionViewConfigs: newSectionViewConfigs,
          },
        })
      );
    },
    [dispatch, parentNodeDisplayName, sectionViewConfigs]
  );

  return (
    <div css={viewsListBodyWrapperStyle}>
      {sectionViewConfigs.map((config: SectionViewShape, index: number) => {
        const otherPaths = (
          sectionViewConfigs.map(
            (views: SectionViewShape, i: number) => views.path || i
          ) as string[]
        ).filter((_key: string, i: number) => i != index);
        return (
          <Item
            key={config.id}
            otherPaths={otherPaths}
            path={config.path}
            viewDisplayName={config.viewDisplayName}
            index={index}
            attrPath={`${index}`}
            handleDeleteSectionView={handleDeleteSectionView}
            handleUpdateItem={handleUpdateItem}
            parentNodeDisplayName={parentNodeDisplayName}
          />
        );
      })}
    </div>
  );
};
