/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
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 { isProfileType } from '../../../utils';
import { Shimmer } from '../Icon';
const iconWrapperStyle = null;
const iconImageStyle = null;
const 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
const LinkAppearance = forwardRef(({
  as: C = "a",
  style: __cmpls,
  ...__cmplp
}, __cmplr) => {
  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
    style: __cmpls,
    ref: __cmplr,
    className: ax(["_syaz13af _9oik1r31 _1bnxglyw _jf4cnqa1", __cmplp.className])
  }));
});
if (process.env.NODE_ENV !== 'production') {
  LinkAppearance.displayName = 'LinkAppearance';
}
export const IconAndTitleLayout = ({
  icon,
  emoji,
  defaultIcon,
  onClick,
  children,
  title,
  titleColor,
  titleTextColor,
  link,
  rightSide,
  testId = 'inline-card-icon-and-title',
  type,
  hideIconLoadingSkeleton
}) => {
  const [hasImageErrored, setHasImageErrored] = useState(false);
  const renderAtlaskitIcon = React.useCallback(() => {
    if (emoji) {
      return emoji;
    }
    if (!icon || typeof icon === 'string') {
      return null;
    }
    return icon;
  }, [emoji, icon]);
  const profileType = isProfileType(type);
  const renderImageIcon = React.useCallback((errored, testId) => {
    if (!icon || typeof icon !== 'string') {
      return null;
    }
    if (hideIconLoadingSkeleton) {
      if (hasImageErrored) {
        return errored;
      }
      return /*#__PURE__*/React.createElement("img", {
        src: icon,
        "data-testid": `${testId}-image`,
        alt: "",
        onError: () => 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": `${testId}-image`,
        alt: "",
        className: ax(["_c71l7vkz _p12f7vkz _1bsb1osq", profileType && styles.roundImageStyle])
      }),
      errored: errored,
      loading: /*#__PURE__*/React.createElement(Shimmer, {
        testId: `${testId}-loading`
      })
    });
  }, [icon, profileType, hideIconLoadingSkeleton, hasImageErrored]);
  const renderIconPlaceholder = React.useCallback(testId => {
    return defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
      label: "link",
      testId: `${testId}-default`,
      color: "currentColor"
    });
  }, [defaultIcon]);
  const renderIcon = React.useCallback(testId => {
    const icon = renderAtlaskitIcon();
    if (icon) {
      return icon;
    }
    const placeholder = renderIconPlaceholder(testId);
    const image = renderImageIcon(placeholder, testId);
    return image || placeholder;
  }, [renderAtlaskitIcon, renderIconPlaceholder, renderImageIcon]);
  const handleClick = React.useCallback(event => {
    if (onClick) {
      event.preventDefault();
      event.stopPropagation();
      onClick(event);
    }
  }, [onClick]);
  const handleKeyPress = React.useCallback(event => {
    if (event.key !== ' ' && event.key !== 'Enter') {
      return;
    }
    if (onClick) {
      event.preventDefault();
      event.stopPropagation();
      onClick(event);
    }
  }, [onClick]);

  // maybe consider memoising this after clean up
  const 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(["_11c8wadc _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 const IconTitleWrapper = props => {
  return /*#__PURE__*/React.createElement(Box, _extends({
    as: "span",
    xcss: styles.iconTitleWrapperStyle
  }, props));
};