/* eslint-disable @typescript-eslint/no-explicit-any */
// import { isEqual } from "lodash-es"
import {
  FC,
  useContext,
  // useMemo,
  //    useCallback,
  // useContext,
  //  useState
} from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { ShortCutContext } from "@/utils/shortcut/shortcutProvider";
import { ListWithNewButtonProps } from "./interface";
import {
  actionListEmptyStyle,
  addNewActionButtonStyle,
  listContainerStyle,
  listStyle,
  // listStyle,
} from "./style";
import { Button, useTheme } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
// import { useModal } from "@/utils/model/src/hook"
// import { v4 } from "uuid"
// import { getExecutionClasses } from "@/redux/currentApp/executionTree/executionSelector";
import { Empty } from "../../Actions/empty/src";
import { List } from "../../Actions/List/list";
import { SearchListItem } from "../SearchListItem";
import { configActions } from "@/redux/config/configSlice";
import { getSelectedClass } from "@/redux/config/configSelector";
import { isEqual } from "lodash";
import { useModal } from "@/utils/model/src";
import { globalColor } from "@/utils/colorBuilder";
// import { executionActions } from "@/redux/currentApp/executionTree/executionSlice";
import { styleActions } from "@/redux/currentApp/style/cursorSlice";
import {
  getCachedClass,
  getClaasesObject,
} from "@/redux/currentApp/style/styleSelector";
// import { getExecutionClasses } from "@/redux/currentApp/executionTree/executionSelector";

export const SearchListWithNewButton: FC<ListWithNewButtonProps> = (props) => {
  const { searchActionValue } = props;
  const selectedClass: string = useSelector(getSelectedClass);
  const cachedClass = useSelector(getCachedClass);
  const classesMap = useSelector(getClaasesObject);
  const classesNameMap: string[] = Object.keys(classesMap);
  const theme = useTheme()
  const shortcut = useContext(ShortCutContext);
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const modal = useModal();
  const searchClassList = classesNameMap.filter((value) => {
    return value.toLowerCase().includes(searchActionValue.toLowerCase());
  });
  const handleClassCreation = () => {
    dispatch(
      configActions.updateSelectedClass(`class ${classesNameMap.length}`)
    );
    dispatch(
      styleActions.updateStyleClassReducer({
        class: {},
        className: `class ${classesNameMap.length}`,
      })
    );
    dispatch(styleActions.updateCachedClass({}));
    // dispatch(
    //   executionActions.updateExecutionStyleClassesReducer({
    //     [`class ${classesNameMap.length}`]: {},
    //   })
    // );
  };
  return (
    <>
      <Button
        css={addNewActionButtonStyle}
        startIcon={<AddIcon sx={{ color: globalColor(`techPurple-03`) }} />}
        onClick={handleClassCreation}
      >
        {t("editor.action.action_list.btn.new")}
      </Button>
      <div css={listContainerStyle}>
        {classesNameMap.length != 0 && (
          <List
            _css={listStyle}
            bordered={false}
            split={false}
            data={searchClassList}
            render={(data) => {
              return (
                <SearchListItem
                  action={data}
                  onCopyItem={() => {}}
                  onDeleteItem={(action) => {
                    if (action.actionType === "globalData") {
                      shortcut.showDeleteDialog(
                        [action.displayName],
                        "globalData"
                      );
                    } else {
                      shortcut.showDeleteDialog([action.displayName], "action");
                    }
                  }}
                  onItemClick={(action:any) => {
                    if (selectedClass === null) {
                      dispatch(configActions.updateSelectedClass(action));
                      dispatch(
                        styleActions.updateCachedClass(classesMap[action])
                      );
                      return;
                    }
                    if (selectedClass !== action) {
                      if (isEqual(classesMap[selectedClass], cachedClass)) {
                        dispatch(configActions.updateSelectedClass(action));
                        dispatch(
                          styleActions.updateCachedClass(classesMap[action])
                        );
                      } else {
                        // show dialog
                        modal.show({
                          children: t(
                            "editor.action.action_list.message.confirm_switch"
                          ),
                          onOk: () => {
                            dispatch(configActions.updateSelectedClass(action));
                            dispatch(
                              styleActions.updateCachedClass(classesMap[action])
                            );
                          },
                          okButtonProps: {
                            colorScheme: "red",
                          },
                        });
                      }
                    }
                  }}
                />
              );
            }}
            renderRaw
            renderKey={(data) => {
              return data.displayName;
            }}
          />
        )}
        {classesNameMap.length == 0 && searchActionValue !== "" && <Empty />}
        {classesNameMap.length == 0 && searchActionValue == "" && (
          <div css={actionListEmptyStyle(theme)}>
            {t("editor.action.action_list.tips.empty")}
          </div>
        )}
      </div>
    </>
  );
};
