/* eslint-disable @typescript-eslint/no-explicit-any */
import {
  //   Suspense,
  forwardRef,
  useCallback,
  useState,
  //   useCallback,
  //   useEffect,
  //   useMemo,
  //   useState,
} from "react";
import {
  useDispatch,
  // useDispatch,
  useSelector,
} from "react-redux";
import { ActionListItemProps } from "@/page/App/components/Actions/ActionListItem/interface";
import { getSelectedClass } from "@/redux/config/configSelector";
import {
  applyActionItemContainerStyle,
  applyActionItemTitleStyle,
} from "./style";
import { configActions } from "@/redux/config/configSlice";
import { Dropdown, DropList, DropListItem } from "@/utils/DropDown";
import { useTranslation } from "react-i18next";
import { styleActions } from "@/redux/currentApp/style/cursorSlice";
import { EditableText } from "@/components/EditableText";
import { isObject } from "lodash-es";
import { RootState } from "@/store";
import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName";

const Item = DropListItem;

export const SearchListItem = forwardRef<HTMLDivElement, ActionListItemProps>(
  (props, ref) => {
    const { action, onItemClick } = props;
    const selectedClass: any = useSelector(getSelectedClass);
    const error = useSelector((state: RootState) => {
      const targetActionErrors =
        state.currentApp.execution.error[action.displayName];
      if (isObject(targetActionErrors)) {
        return Object.keys(targetActionErrors).length > 0;
      }
      return false;
    });
    const dispatch = useDispatch();
    const [editName, setEditName] = useState(false);
    const { t } = useTranslation();
    const changeDisplayName = useCallback(
      (newClassName: string) => {
        if (DisplayNameGenerator.isAlreadyGenerate(newClassName)) {
          setEditName(false);
          return;
        }
        DisplayNameGenerator.addDisplayNames([newClassName]);
        DisplayNameGenerator.removeDisplayName(selectedClass);
        dispatch(
          styleActions.updateClassNameReducer({
            className: selectedClass,
            newClassName,
          })
        );
        dispatch(styleActions.deleteStyleClassReducer(selectedClass));
        setEditName(false);
        dispatch(configActions.updateSelectedClass(newClassName));
      },
      [dispatch, selectedClass]
    );
    return (
      <Dropdown
        trigger="contextmenu"
        position="right-start"
        dropList={
          <DropList w="184px">
            <Item
              key={"rename"}
              value={"rename"}
              title={t("editor.action.action_list.contextMenu.rename")}
              onClick={() => {
                setEditName(true);
              }}
            />
            <Item
              key={"duplicate"}
              value={"duplicate"}
              title={t("editor.action.action_list.contextMenu.duplicate")}
              onClick={() => {
                // onCopyItem(action);
              }}
            />
            <Item
              key={"delete"}
              value={"delete"}
              title={t("editor.action.action_list.contextMenu.delete")}
              deleted
              onClick={() => {
                // onDeleteItem(action);
              }}
            />
          </DropList>
        }
      >
        <div
          css={applyActionItemContainerStyle(selectedClass === action)}
          ref={ref}
          onClick={() => {
            onItemClick(action);
          }}
          onDoubleClick={() => {
            setEditName(true);
          }}
        >
          {!editName ? (
            <div css={applyActionItemTitleStyle(error)}>{action.displayName}</div>
          ) : (
            <EditableText
              key={action.actionID}
              displayName={action.displayName}
              updateDisplayNameByBlur={changeDisplayName}
            />
          )}
        </div>
      </Dropdown>
    );
  }
);

SearchListItem.displayName = "SearchListItem";

{
  /* {!edit ? (
            <div css={applyActionItemTitleStyle(false)}>{action}</div>
          ) : ( */
}

// <Input
//   onKeyDown={(e) => {
//     if (e.key == "Enter") {
//       changeDisplayName(value);
//     }
//   }}
//   fullWidth
//   // variant="filled"
//   value={value}
//   onChange={(e) => setValue(e.target.value)}
//   defaultValue={action}
//   endAdornment={
//     <InputAdornment position="end">
//       <IconButton
//         aria-label="toggle password visibility"
//         onClick={() => changeDisplayName(value)}
//         color="success"
//         size="small"
//         // onMouseDown={handleMouseDownPassword}
//         edge="end"
//       >
//         <Save />
//       </IconButton>
//     </InputAdornment>
//   }
//   autoFocus
//   size="small"
//   disabled={changing}
// />
// )}
