/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.IconTitleWrapper = exports.IconAndTitleLayout = void 0;
require("./index.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _reactMagneticDi = require("react-magnetic-di");
var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
var _compiled = require("@atlaskit/primitives/compiled");
var _colors = require("@atlaskit/theme/colors");
var _utils = require("../../../utils");
var _Icon = require("../Icon");
var _excluded = ["as", "style"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var iconWrapperStyle = null;
var iconImageStyle = null;
var styles = {
  iconEmptyStyle: "_1bsb7vkz _4t3i1osq _1e0c1o8l _tzy4idpf",
  iconOuterWrapperStyle: "_1e0c1o8l _2hwx1b66 _kqswh2mm",
  iconTitleWrapperStyle: "_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66",
  linkStyle: "_2rkolb4i",
  noLinkAppearanceStyle: "_syaz1rpy _18u01b66",
  roundImageStyle: "_2rko1rr0"
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/design-system/no-html-anchor -- Ignored via go/DSP-18766
var LinkAppearance = (0, _react.forwardRef)(function (_ref, __cmplr) {
  var _ref$as = _ref.as,
    C = _ref$as === void 0 ? "a" : _ref$as,
    __cmpls = _ref.style,
    __cmplp = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
    style: __cmpls,
    ref: __cmplr,
    className: (0, _runtime.ax)(["_syaz1y58 _9oik1r31 _1bnxglyw _jf4cnqa1", __cmplp.className])
  }));
});
if (process.env.NODE_ENV !== 'production') {
  LinkAppearance.displayName = 'LinkAppearance';
}
var IconAndTitleLayout = exports.IconAndTitleLayout = function IconAndTitleLayout(_ref2) {
  var icon = _ref2.icon,
    emoji = _ref2.emoji,
    defaultIcon = _ref2.defaultIcon,
    onClick = _ref2.onClick,
    children = _ref2.children,
    title = _ref2.title,
    titleColor = _ref2.titleColor,
    titleTextColor = _ref2.titleTextColor,
    link = _ref2.link,
    rightSide = _ref2.rightSide,
    _ref2$testId = _ref2.testId,
    testId = _ref2$testId === void 0 ? 'inline-card-icon-and-title' : _ref2$testId,
    type = _ref2.type,
    hideIconLoadingSkeleton = _ref2.hideIconLoadingSkeleton;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    hasImageErrored = _useState2[0],
    setHasImageErrored = _useState2[1];
  var renderAtlaskitIcon = _react.default.useCallback(function () {
    if (emoji) {
      return emoji;
    }
    if (!icon || typeof icon === 'string') {
      return null;
    }
    return icon;
  }, [emoji, icon]);
  var profileType = (0, _utils.isProfileType)(type);
  var renderImageIcon = _react.default.useCallback(function (errored, testId) {
    if (!icon || typeof icon !== 'string') {
      return null;
    }
    if (hideIconLoadingSkeleton) {
      if (hasImageErrored) {
        return errored;
      }
      return /*#__PURE__*/_react.default.createElement("img", {
        src: icon,
        "data-testid": "".concat(testId, "-image"),
        alt: "",
        onError: function onError() {
          return setHasImageErrored(true);
        },
        className: (0, _runtime.ax)(["_c71l7vkz _p12f7vkz _1bsb1osq", profileType && styles.roundImageStyle])
      });
    }
    return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
      src: icon,
      loaded: /*#__PURE__*/_react.default.createElement("img", {
        src: icon,
        "data-testid": "".concat(testId, "-image"),
        alt: "",
        className: (0, _runtime.ax)(["_c71l7vkz _p12f7vkz _1bsb1osq", profileType && styles.roundImageStyle])
      }),
      errored: errored,
      loading: /*#__PURE__*/_react.default.createElement(_Icon.Shimmer, {
        testId: "".concat(testId, "-loading")
      })
    });
  }, [icon, profileType, hideIconLoadingSkeleton, hasImageErrored]);
  var renderIconPlaceholder = _react.default.useCallback(function (testId) {
    return defaultIcon || /*#__PURE__*/_react.default.createElement(_link.default, {
      label: "link",
      testId: "".concat(testId, "-default"),
      color: "currentColor"
    });
  }, [defaultIcon]);
  var renderIcon = _react.default.useCallback(function (testId) {
    var icon = renderAtlaskitIcon();
    if (icon) {
      return icon;
    }
    var placeholder = renderIconPlaceholder(testId);
    var image = renderImageIcon(placeholder, testId);
    return image || placeholder;
  }, [renderAtlaskitIcon, renderIconPlaceholder, renderImageIcon]);
  var handleClick = _react.default.useCallback(function (event) {
    if (onClick) {
      event.preventDefault();
      event.stopPropagation();
      onClick(event);
    }
  }, [onClick]);
  var handleKeyPress = _react.default.useCallback(function (event) {
    if (event.key !== ' ' && event.key !== 'Enter') {
      return;
    }
    if (onClick) {
      event.preventDefault();
      event.stopPropagation();
      onClick(event);
    }
  }, [onClick]);

  // maybe consider memoising this after clean up
  var titlePart = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
    as: "span"
    // EDM-12119: This is set here to help with the positioning of the icon to be in the middle of inline display.
    // We cannot set the fix font because inline is taking the parent container font size into account.
    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
    ,
    style: {
      lineHeight: "1"
    },
    xcss: styles.iconOuterWrapperStyle,
    testId: "icon-position-wrapper"
  }, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
    as: "span",
    xcss: styles.iconEmptyStyle,
    testId: "icon-empty-wrapper"
  }), /*#__PURE__*/_react.default.createElement("span", {
    "data-testid": "icon-wrapper",
    className: (0, _runtime.ax)(["_11c81o8v _2rkolb4i _1e0c116y _kqswstnw _2hwx1b66 _4t3i7vkz _1bsb7vkz _154i1ssb _1ltv1ssb _t9ec1ooe _uiztglyw"])
  }, renderIcon(testId)))), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
    as: "span",
    style: {
      color: titleTextColor
    }
  }, title));
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(IconTitleWrapper, {
    style: {
      color: titleColor
    },
    testId: testId
  }, link ? /*#__PURE__*/_react.default.createElement(LinkAppearance, {
    href: link,
    onClick: handleClick,
    onKeyPress: handleKeyPress,
    className: (0, _runtime.ax)([styles.linkStyle])
  }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
    as: "span",
    xcss: styles.noLinkAppearanceStyle
  }, rightSide) : null));
};
var IconTitleWrapper = exports.IconTitleWrapper = function IconTitleWrapper(props) {
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
    as: "span",
    xcss: styles.iconTitleWrapperStyle
  }, props));
};