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

const useButtonAriaProps = props => {
  let {
    elementType = 'button',
    disabled,
    autoFocus,
    focusClass,
    text,
    ariaLabel,
    ariaHaspopup,
    ariaPressed,
    ariaExpanded,
    ariaLabelledby
  } = props;
  let {
    focusVisible,
    focusProps
  } = useFocusVisible(props);
  let buttonProp = {};

  if (elementType === 'button') {
    buttonProp = {
      disabled: disabled
    };
  } else {
    buttonProp = {
      role: 'button',
      tabIndex: disabled ? undefined : 0
    };
  }

  return {
    buttonProps: { ...buttonProp,
      'aria-label': ariaLabel || text,
      'aria-disabled': !disabled ? undefined : disabled,
      'aria-haspopup': ariaHaspopup,
      'aria-pressed': ariaPressed,
      'aria-expanded': ariaExpanded,
      'aria-labelledby': ariaLabelledby,
      'data-aria-autofocus': autoFocus,
      'data-aria-focusstyle': focusClass
    },
    focusVisible,
    focusProps
  };
};

export default useButtonAriaProps;