import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["children", "as", "href", "color", "underlined", "unstyled", "emphasised", "disabled", "weight", "className", "inherited", "size", "aria-label", "target", "onClick", "newTabLabel", "hideNewTabIndicator"];
import * as React from 'react';
import classNames from 'classnames';
import { __DEV__, invariant, generateId } from '../utils';
import Text from './Text';
import { TEXT_SIZE, TEXT_WEIGHT, TEXT_TRANSFORM, TEXT_ALIGN, TEXT_COLOR } from './textConsts';
import { generateResponsiveClassNames } from '../utils/responsive-props';
var anchorRelatedProps = ['download', 'hreflang', 'ping', 'referrerpolicy', 'rel'];
export { TEXT_COLOR };
export var LINK_SIZE = TEXT_SIZE;
export var LINK_WEIGHT = TEXT_WEIGHT;
export var LINK_TRANSFORM = TEXT_TRANSFORM;
export var LINK_ALIGN = TEXT_ALIGN;

var Link = function Link(props) {
  var _ref;

  var children = props.children,
      _props$as = props.as,
      as = _props$as === void 0 ? 'a' : _props$as,
      href = props.href,
      color = props.color,
      _props$underlined = props.underlined,
      underlined = _props$underlined === void 0 ? false : _props$underlined,
      _props$unstyled = props.unstyled,
      unstyled = _props$unstyled === void 0 ? false : _props$unstyled,
      _props$emphasised = props.emphasised,
      emphasised = _props$emphasised === void 0 ? true : _props$emphasised,
      _props$disabled = props.disabled,
      disabled = _props$disabled === void 0 ? false : _props$disabled,
      weight = props.weight,
      className = props.className,
      _props$inherited = props.inherited,
      inherited = _props$inherited === void 0 ? false : _props$inherited,
      size = props.size,
      ariaLabel = props['aria-label'],
      target = props.target,
      onClick = props.onClick,
      _props$newTabLabel = props.newTabLabel,
      newTabLabel = _props$newTabLabel === void 0 ? '(opens in a new tab)' : _props$newTabLabel,
      _props$hideNewTabIndi = props.hideNewTabIndicator,
      hideNewTabIndicator = _props$hideNewTabIndi === void 0 ? false : _props$hideNewTabIndi,
      additionalProps = _objectWithoutProperties(props, _excluded);

  var _React$useRef = React.useRef(generateId()),
      labelId = _React$useRef.current;

  var textSize;

  if (_typeof(size) === 'object') {
    if (Array.isArray(size)) {
      textSize = size.map(function (sizeItem) {
        return sizeItem;
      });
    } else {
      textSize = {
        sm: size.sm,
        md: size.md,
        lg: size.lg,
        xl: size.xl
      };
    }
  } else if (size) {
    textSize = size;
  }

  if (__DEV__) {
    invariant(!(as === 'a' && !disabled && (href === null || href === undefined)), 'An anchor element without a href will be accessible only for users with a pointing device.');
    invariant(!(as === 'button' && (href || Object.keys(additionalProps).some(function (p) {
      return anchorRelatedProps.includes(p);
    }))), // $FlowFixMe
    "An anchor-related prop is not working for as=\"button\": ".concat(Object.keys(additionalProps)));
  }

  var linkClass = classNames.apply(void 0, [(_ref = {}, _defineProperty(_ref, "sg-text--inherited", inherited), _defineProperty(_ref, 'sg-text--link', !underlined && !unstyled), _defineProperty(_ref, 'sg-text--link-underlined', underlined && !unstyled), _defineProperty(_ref, 'sg-text--link-unstyled', !underlined && unstyled), _defineProperty(_ref, 'sg-text--bold', emphasised && !inherited), _defineProperty(_ref, 'sg-text--link-disabled', disabled), _defineProperty(_ref, "sg-text--".concat(String(color)), color && !unstyled), _defineProperty(_ref, 'sg-text--link-label', as === 'button'), _ref)].concat(_toConsumableArray(generateResponsiveClassNames(function (weight) {
    return "sg-text--".concat(weight);
  }, weight)), [className])); // suppressHydrationWarning is used until 'useId' hook is available

  if (as === 'button') {
    return /*#__PURE__*/React.createElement(Text, _extends({}, additionalProps, {
      as: "label",
      className: linkClass,
      size: textSize
    }), /*#__PURE__*/React.createElement("span", {
      id: labelId,
      "aria-label": ariaLabel,
      "aria-hidden": true,
      suppressHydrationWarning: true
    }, children), /*#__PURE__*/React.createElement("button", {
      className: "sg-visually-hidden sg-text--link-button",
      onClick: onClick,
      disabled: disabled,
      type: "button",
      "aria-labelledby": labelId,
      suppressHydrationWarning: true
    }));
  }

  var linkType = disabled ? 'span' : 'a';

  var onLinkClick = function onLinkClick(e) {
    if (!disabled && onClick) {
      return onClick(e);
    }
  };

  return /*#__PURE__*/React.createElement(Text, _extends({}, additionalProps, {
    as: linkType,
    href: href || '',
    className: linkClass,
    size: textSize,
    onClick: onLinkClick,
    "aria-label": ariaLabel,
    target: target
  }), children, target === '_blank' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    "aria-hidden": true,
    hidden: hideNewTabIndicator
  }, "\u2B08"), /*#__PURE__*/React.createElement("span", {
    className: "sg-visually-hidden"
  }, newTabLabel)));
};

export default Link;