/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["as", "style"];
import "./index.compiled.css";
import { forwardRef } from 'react';
import { ax, ix } from "@compiled/react/runtime";
import React, { useState } from 'react';
import { di } from 'react-magnetic-di';
import ImageLoader from 'react-render-image';
import LinkIcon from '@atlaskit/icon/core/link';
import { Box } from '@atlaskit/primitives/compiled';
import { B400 } from '@atlaskit/theme/colors';
import { isProfileType } from '../../../utils';
import { Shimmer } from '../Icon';
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 = forwardRef(function (_ref, __cmplr) {
  var _ref$as = _ref.as,
    C = _ref$as === void 0 ? "a" : _ref$as,
    __cmpls = _ref.style,
    __cmplp = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
    style: __cmpls,
    ref: __cmplr,
    className: ax(["_syaz1y58 _9oik1r31 _1bnxglyw _jf4cnqa1", __cmplp.className])
  }));
});
if (process.env.NODE_ENV !== 'production') {
  LinkAppearance.displayName = 'LinkAppearance';
}
export var 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 = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    hasImageErrored = _useState2[0],
    setHasImageErrored = _useState2[1];
  var renderAtlaskitIcon = React.useCallback(function () {
    if (emoji) {
      return emoji;
    }
    if (!icon || typeof icon === 'string') {
      return null;
    }
    return icon;
  }, [emoji, icon]);
  var profileType = isProfileType(type);
  var renderImageIcon = React.useCallback(function (errored, testId) {
    if (!icon || typeof icon !== 'string') {
      return null;
    }
    if (hideIconLoadingSkeleton) {
      if (hasImageErrored) {
        return errored;
      }
      return /*#__PURE__*/React.createElement("img", {
        src: icon,
        "data-testid": "".concat(testId, "-image"),
        alt: "",
        onError: function onError() {
          return setHasImageErrored(true);
        },
        className: ax(["_c71l7vkz _p12f7vkz _1bsb1osq", profileType && styles.roundImageStyle])
      });
    }
    return /*#__PURE__*/React.createElement(ImageLoader, {
      src: icon,
      loaded: /*#__PURE__*/React.createElement("img", {
        src: icon,
        "data-testid": "".concat(testId, "-image"),
        alt: "",
        className: ax(["_c71l7vkz _p12f7vkz _1bsb1osq", profileType && styles.roundImageStyle])
      }),
      errored: errored,
      loading: /*#__PURE__*/React.createElement(Shimmer, {
        testId: "".concat(testId, "-loading")
      })
    });
  }, [icon, profileType, hideIconLoadingSkeleton, hasImageErrored]);
  var renderIconPlaceholder = React.useCallback(function (testId) {
    return defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
      label: "link",
      testId: "".concat(testId, "-default"),
      color: "currentColor"
    });
  }, [defaultIcon]);
  var renderIcon = React.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.useCallback(function (event) {
    if (onClick) {
      event.preventDefault();
      event.stopPropagation();
      onClick(event);
    }
  }, [onClick]);
  var handleKeyPress = React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
    as: "span",
    xcss: styles.iconEmptyStyle,
    testId: "icon-empty-wrapper"
  }), /*#__PURE__*/React.createElement("span", {
    "data-testid": "icon-wrapper",
    className: ax(["_11c81o8v _2rkolb4i _1e0c116y _kqswstnw _2hwx1b66 _4t3i7vkz _1bsb7vkz _154i1ssb _1ltv1ssb _t9ec1ooe _uiztglyw"])
  }, renderIcon(testId)))), /*#__PURE__*/React.createElement(Box, {
    as: "span",
    style: {
      color: titleTextColor
    }
  }, title));
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconTitleWrapper, {
    style: {
      color: titleColor
    },
    testId: testId
  }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
    href: link,
    onClick: handleClick,
    onKeyPress: handleKeyPress,
    className: ax([styles.linkStyle])
  }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(Box, {
    as: "span",
    xcss: styles.noLinkAppearanceStyle
  }, rightSide) : null));
};
export var IconTitleWrapper = function IconTitleWrapper(props) {
  return /*#__PURE__*/React.createElement(Box, _extends({
    as: "span",
    xcss: styles.iconTitleWrapperStyle
  }, props));
};