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

const useTabAriaProps = function (props, state) {
  let configuration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
    focus: true,
    wrap: true,
    keyName: {
      left: ["arrowleft"],
      right: ["arrowright"]
    }
  };
  let {
    uniqueId
  } = props;
  let navigationProps = useAccessNavigationManager(configuration);
  let {
    rootElementProps,
    getItemProps,
    focusFirst
  } = navigationProps;
  let tabUniqueId = uniqueId || useId();
  return {
    tabListProps: props => {
      let {
        ariaLabel
      } = props || {};
      return {
        "role": "tablist",
        "aria-label": ariaLabel,
        ...rootElementProps
      };
    },
    tabProps: props => {
      let {
        active,
        disabled,
        value
      } = props || {};
      let {
        dataAriaItem,
        dataAriaItemDisabled,
        itemId
      } = getItemProps(value);
      let dataAriaProps = !disabled ? { ...dataAriaItem
      } : { ...dataAriaItemDisabled
      };
      return {
        id: `${tabUniqueId}_tab_${value}`,
        "role": "tab",
        "tabIndex": disabled ? undefined : active ? "0" : "-1",
        "aria-selected": active,
        "aria-disabled": disabled ? 'true' : undefined,
        "aria-controls": `${tabUniqueId}_tabpanel_${value}`,
        itemId,
        ...dataAriaProps
      };
    },
    tabPanelProps: props => {
      let {
        value
      } = props || {};
      return {
        "id": `${tabUniqueId}_tabpanel_${value}`,
        "role": "tabpanel",
        "tabIndex": "0",
        "aria-labelledby": `${tabUniqueId}_tab_${value}`
      };
    },
    focusFirst
  };
};

export default useTabAriaProps;