import React, { useMemo } from 'react';
import useFocusVisible from '@zohodesk/hooks/es/accessiblity/useFocusVisible';

const useDropDownAriaProps = props => {
  let {
    elementType = 'menu',
    disabled,
    autoFocus,
    focusClass,
    text,
    ariaLabel,
    ariaHaspopup,
    ariaPressed,
    ariaExpanded,
    ariaLabelledby
  } = props;
  let {
    focusVisible,
    focusProps
  } = useFocusVisible(props);
  return {
    targetProps: {
      'aria-label': ariaLabel || text,
      'aria-disabled': !disabled ? undefined : disabled,
      'aria-haspopup': ariaHaspopup,
      'aria-pressed': ariaPressed,
      'aria-expanded': ariaExpanded,
      'data-aria-autofocus': autoFocus,
      'data-aria-focusstyle': focusClass,
      role: elementType,
      tabIndex: disabled ? undefined : 0
    },
    contentProps: {
      'aria-labelledby': ariaLabelledby
    },
    focusVisible,
    focusProps
  };
};

export default useDropDownAriaProps;