import React, { useContext } from 'react';
import { cx } from "../../../lib/theming/Emotion";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { ArrowRightIcon } from "../ArrowRightIcon";
import { ArrowLeftIcon } from "../ArrowLeftIcon";
import { globalClasses, styles } from "../Button.styles";
var ButtonArrow = function ButtonArrow(_ref) {
  var arrow = _ref.arrow,
    size = _ref.size;
  var theme = useContext(ThemeContext);
  var getArrowIconRootClassName = function getArrowIconRootClassName() {
    var _cx;
    return cx(styles.arrowIconRoot(), globalClasses.arrow, (_cx = {}, _cx[styles.arrowIconRootSmall(theme)] = size === 'small', _cx[styles.arrowIconRootMedium(theme)] = size === 'medium', _cx[styles.arrowIconRootLarge(theme)] = size === 'large', _cx[styles.arrowIconLeft()] = arrow === 'left', _cx));
  };
  var arrowIcons = {
    right: ArrowRightIcon,
    left: ArrowLeftIcon
  };
  var side = arrow === 'left' ? 'left' : 'right';
  var ArrowIcon = arrowIcons[side];
  var arrowNode = /*#__PURE__*/
  React.createElement("div", {
    className: getArrowIconRootClassName()
  }, /*#__PURE__*/
  React.createElement(ArrowIcon, {
    size: size
  }));
  return arrowNode;
};
export function useButtonArrow(props, theme) {
  var arrow = props.arrow,
    size = props.size,
    use = props.use;
  var canRender = use !== 'link' && (arrow === true || arrow === 'left');
  var rootClassName = canRender ? cx(arrow === true && size === 'small' && styles.withArrowIconRightSmall(theme), arrow === true && size === 'medium' && styles.withArrowIconRightMedium(theme), arrow === true && size === 'large' && styles.withArrowIconRightLarge(theme), arrow === 'left' && size === 'small' && styles.withArrowIconLeftSmall(theme), arrow === 'left' && size === 'medium' && styles.withArrowIconLeftMedium(theme), arrow === 'left' && size === 'large' && styles.withArrowIconLeftLarge(theme)) : '';
  var arrowNode = canRender ? /*#__PURE__*/React.createElement(ButtonArrow, props) : null;
  return [rootClassName, arrowNode];
}