import React, { useState, useEffect, useRef, useMemo } from 'react';
import debounce from 'lodash-es/debounce';
import classnames from 'classnames';
import { DropdownSectionedContentList } from './dropdown-content-list';
import DropdownMenuMultiLevelOptions from './dropdown-menu-multi-level-options';
import { jsx as _jsx } from "react/jsx-runtime";
const DELAY = 300;

// this will create leveling system for top level items and their subItems
// to enable effective comparisson strategy
// top items will have level:1, level:2, level:3
// while their children will be assigned a number that contains parents index and the children's index
// in the subItems collection after a . (like 1.0, 1.1, 1.2, etc)
const setLevels = (options, baseIndex) => {
  return options.map((option, i) => {
    // index can start with 1, check has to be explicit
    const index = i + 1;
    const level = baseIndex === undefined ? `${index}` : `${baseIndex}.${index}`;
    const newOption = {
      ...option,
      level
    };
    if (newOption.subOptions && newOption.subOptions.length > 0) {
      newOption.subOptions = setLevels(newOption.subOptions, level);
    }
    if (newOption.subItems && newOption.subItems.length > 0) {
      newOption.subItems = setLevels(newOption.subItems, level);
    }
    return newOption;
  });
};
const DropdownMenuMultiLevelList = ({
  options,
  onSelect,
  closeDropdown,
  selectedOption,
  contentTestId,
  contentClassName,
  isMultiLevelSectioned,
  LinkComponent
}) => {
  const preparedOptions = useMemo(() => setLevels(options), [options]);
  const [state, setState] = useState({
    level: null,
    isSubLevelOpen: false
  });
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const debouncedFunc = debounce(setState, DELAY, {
    trailing: true
  });
  const debouncedSet = useRef();
  useEffect(() => {
    debouncedSet.current = debounce(setState, DELAY, {
      trailing: true
    });
    return () => {
      debouncedSet.current?.cancel?.();
    };
  }, []);
  const handleMouseEnter = level => {
    return debouncedSet.current && debouncedSet.current({
      level: level || null,
      isSubLevelOpen: true
    });
  };
  const handleMouseLeave = () => {
    return debouncedSet.current && debouncedSet.current({
      level: null,
      isSubLevelOpen: true
    });
  };

  // this will trigger reopening nested menu on option click insted of closing the whole menu
  const handleSubLevelClose = () => {
    setState({
      level: null,
      isSubLevelOpen: false
    });
  };
  const multiLevelProps = {
    state,
    selectedOption,
    handleSubLevelClose,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    LinkComponent
  };
  return isMultiLevelSectioned ? /*#__PURE__*/_jsx(DropdownSectionedContentList, {
    isMultiLevelSectioned: isMultiLevelSectioned,
    options: preparedOptions,
    onSelect: onSelect,
    onCloseDropdown: closeDropdown,
    multiLevelProps: multiLevelProps,
    contentClassName: contentClassName,
    LinkComponent: LinkComponent
  }) : /*#__PURE__*/_jsx("ul", {
    className: classnames('dropdown-menu-list', contentClassName),
    role: "menu",
    "test-id": contentTestId,
    tabIndex: -1,
    children: preparedOptions.map(option => /*#__PURE__*/_jsx(DropdownMenuMultiLevelOptions, {
      onSelect: onSelect,
      closeDropdown: closeDropdown,
      option: option,
      ...multiLevelProps
    }, option.key))
  });
};
export default DropdownMenuMultiLevelList;