import { useMemo } from 'react';
import useId from "@zohodesk/hooks/es/utils/useId";
import useAccessNavigationManager from "@zohodesk/hooks/es/accessiblity/useAccessNavigationManager";

const useListBoxAriaProps = function (props) {
  let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
    focus: true,
    wrap: true,
    hover: false,
    role: 'listbox'
  };
  let {
    uniqueId
  } = props || {};
  const nextId = uniqueId || useId();
  let navigationProps = useAccessNavigationManager(config);
  let {
    rootElementProps,
    getItemProps,
    focusFirst
  } = navigationProps;
  let labelUniqueNumber = nextId;
  let valueUniqueNumber = nextId + '_valueid';
  return {
    menuProps: () => {
      return {
        role: 'listbox'
      };
    },
    rootElementProps: () => {
      return { ...rootElementProps
      };
    },
    menuItemProps: props => {
      let {
        active,
        value,
        disabled,
        focusClass
      } = props || {};
      let {
        dataAriaItem,
        itemId,
        dataAriaItemDisabled
      } = getItemProps(value);
      let ariaItem = disabled ? dataAriaItemDisabled : dataAriaItem;
      return {
        role: 'option',
        id: `${nextId}_${value}`,
        tabIndex: !disabled ? '0' : '-1',
        'aria-selected': active,
        'aria-disabled': disabled ? 'true' : undefined,
        'data-aria-focusstyle': focusClass,
        ...ariaItem,
        itemId
      };
    },
    focusFirst
  };
};

export default useListBoxAriaProps;