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

const useMultiSelectAriaProps = function (props, state) {
  let config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
    listConfig: {
      focus: false,
      wrap: true,
      activecss: style.highLight,
      keyName: {
        up: ['arrowup'],
        down: ['arrowdown']
      },
      activeAnyOnEnter: true
    },
    selectedConfig: {
      wrap: true,
      keyName: {
        left: ['arrowleft'],
        right: ['arrowright']
      },
      focus: false,
      activecss: style.highLight,
      onKeyDown: props.onKeyDown,
      activeAnyOnEnter: true
    }
  };
  const {
    uniqueId,
    isPopupOpen
  } = props || {};
  const nextId = uniqueId || useId();
  const navigationProps = useAccessNavigationManager(config.listConfig);
  const {
    rootElementProps: listRootElementProps,
    getItemProps: listGetItemProps,
    focusFirst,
    inputProps: listInputProps,
    activeId: listActiveId
  } = navigationProps;
  const tagNavProps = useAccessNavigationManager(config.selectedConfig);
  const {
    rootElementProps: tagRootElementProps,
    getItemProps: tagGetItemProps,
    inputProps: tagInputProps,
    activeId: tagActiveId
  } = tagNavProps;
  const labelUniqueNumber = nextId;
  const valueUniqueNumber = `${nextId}_valueid`;
  const htmlFor = `${nextId}_for`;
  const menuId = `${nextId}_menu`;
  useRestoreFocus({
    isRestoreFocus: isPopupOpen,
    onUpdate: nodes => {
      focusFirst();
      return nodes;
    }
  });
  return {
    triggerProps: props => {
      const {
        focusClass
      } = props || {};
      const {
        buttonProps
      } = useButtonAriaProps({
        'aria-labelledby': uniqueId ? `${labelUniqueNumber} ${valueUniqueNumber}` : undefined,
        'aria-haspopup': 'listbox',
        'aria-expanded': isPopupOpen,
        'data-aria-focusstyle': focusClass,
        elementType: 'div'
      });
      return buttonProps;
    },
    labelProps: () => ({
      id: labelUniqueNumber,
      htmlFor
    }),
    valueProps: () => ({
      id: valueUniqueNumber
    }),
    inputProps: props => {
      const {
        ariaAutocompconste
      } = props || {};
      return {
        role: 'combobox',
        id: htmlFor,
        'aria-labelledby': labelUniqueNumber,
        'aria-autocompconste': ariaAutocompconste || 'list',
        'aria-expanded': isPopupOpen,
        'aria-activedescendant': isPopupOpen ? listActiveId : tagActiveId,
        'aria-control': menuId,
        listInputProps,
        tagInputProps
      };
    },
    menuProps: () => ({
      role: 'listbox',
      id: menuId
    }),
    rootElementProps: () => ({
      listRootElementProps: { ...listRootElementProps
      },
      tagRootElementProps: { ...tagRootElementProps
      }
    }),
    selectedItemProps: props => {
      console.log(props);
      const {
        active,
        disabled,
        value,
        id
      } = props || {};
      const {
        dataAriaItem,
        dataAriaItemDisabled,
        itemId
      } = tagGetItemProps(value);
      const ariaItem = disabled ? dataAriaItemDisabled : dataAriaItem;
      return {
        role: 'tag',
        id: `${value}`,
        tabIndex: !disabled ? '0' : '-1',
        'aria-selected': active,
        'aria-disabled': disabled ? 'true' : undefined,
        ...ariaItem,
        itemId
      };
    },
    menuItemProps: props => {
      const {
        active,
        disabled,
        value
      } = props || {};
      const {
        dataAriaItem,
        dataAriaItemDisabled,
        itemId
      } = listGetItemProps(value);
      const ariaItem = disabled ? dataAriaItemDisabled : dataAriaItem;
      return {
        role: 'option',
        id: `${nextId}_${value}`,
        tabIndex: !disabled ? '0' : '-1',
        'aria-selected': active,
        'aria-disabled': disabled ? 'true' : undefined,
        ...ariaItem,
        itemId
      };
    },
    focusRemove: ele => {
      const element = document.querySelector(`[data-aria-rootid="${ele}"]`).getElementsByClassName(`${style.highLight}`);
      element && element[0] && element[0].classList.remove(`${style.highLight}`);
    }
  };
};

export default useMultiSelectAriaProps;