import { useRef, useEffect } from 'react';
import useId from '@zohodesk/hooks/es/utils/useId';
import useAccessNavigationManager from '@zohodesk/hooks/es/accessiblity/useAccessNavigationManager';
import style from '../Select.module.css';
import useButtonAriaProps from '../../deprecated/button/useButtonAriaProps';
import useRestoreFocus from '@zohodesk/hooks/es/accessiblity/useRestoreFocus';

const useComboBoxAriaProps = function (props, state) {
  let config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
    focus: false,
    wrap: true,
    hover: true,
    activeAnyOnEnter: true,
    activecss: style.focus3
  };
  let {
    uniqueId,
    isPopupOpen
  } = props || {};
  const nextId = uniqueId || useId();
  let navigationProps = useAccessNavigationManager(config);
  let {
    rootElementProps,
    getItemProps,
    focusFirst,
    inputProps,
    activeId,
    clearWhile
  } = navigationProps;
  let labelUniqueNumber = nextId;
  let valueUniqueNumber = nextId + '_valueid';
  let htmlFor = nextId + '_for';
  let menuId = nextId + '_menu';
  let inputRef = useRef(null);
  useRestoreFocus({
    isRestoreFocus: isPopupOpen,
    onUpdate: nodes => {
      requestAnimationFrame(() => {
        inputRef.current && inputRef.current.focus();
        focusFirst();
      });
      return nodes;
    }
  });
  return {
    triggerProps: props => {
      let {
        focusClass
      } = props || {};
      let {
        buttonProps
      } = useButtonAriaProps({
        'aria-labelledby': uniqueId ? `${labelUniqueNumber} ${valueUniqueNumber}` : undefined,
        'aria-haspopup': 'listbox',
        'aria-expanded': isPopupOpen,
        'data-aria-focusstyle': focusClass,
        elementType: 'div'
      });
      return buttonProps;
    },
    labelProps: () => {
      return {
        id: labelUniqueNumber,
        htmlFor
      };
    },
    valueProps: () => {
      return {
        id: valueUniqueNumber
      };
    },
    getInputRef: el => {
      inputRef.current = el;
    },
    inputProps: props => {
      let {
        ariaAutocomplete
      } = props || {};
      return {
        role: 'combobox',
        id: htmlFor,
        'aria-labelledby': labelUniqueNumber,
        'aria-autocomplete': ariaAutocomplete || 'list',
        'aria-expanded': isPopupOpen,
        'aria-activedescendant': activeId,
        'aria-control': menuId,
        ...inputProps
      };
    },
    menuProps: () => {
      return {
        role: 'listbox',
        id: menuId
      };
    },
    rootElementProps: () => {
      return { ...rootElementProps
      };
    },
    menuItemProps: props => {
      let {
        active,
        id,
        disabled,
        value
      } = props || {};
      let {
        dataAriaItem,
        dataAriaItemDisabled,
        itemId
      } = getItemProps(id);
      let ariaItem = disabled ? dataAriaItemDisabled : dataAriaItem;
      return {
        role: 'option',
        id: `${nextId}_${value}`,
        tabIndex: !disabled ? '0' : '-1',
        'aria-selected': active,
        'aria-disabled': disabled ? 'true' : undefined,
        ...ariaItem,
        itemId
      };
    }
  };
};

export default useComboBoxAriaProps;