/* custom-logo.tsx generated by @compiled/babel-plugin v0.38.1 */
import "./custom-logo.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useEffect, useRef } from 'react';
import { cx } from '@compiled/react';
import { fg } from '@atlaskit/platform-feature-flags';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Anchor } from '@atlaskit/primitives';
import { useHasCustomTheme } from '../themed/has-custom-theme-context';
import { LogoRenderer } from './logo-renderer';
const anchorStyles = {
  root: "_2rkofajl _1e0c1txw _4cvr1h6o _4t3izwfg",
  customLogoBorderRadius: "_2rkofajl",
  newMargin: "_ahbq1b66",
  newInteractionStates: "_irr3166n _1di61wwy",
  newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"
};
const sharedIconOrLogoContainerStyles = {
  root: "_1reo15vq _18m915vq _bna71tcg _rtys1kw7 _1jpx1f51",
  appIconTilePaddingFlagged: "_18zr1b66"
};
const iconContainerStyles = {
  root: "_18zr1b66 _1e0c1txw _p12f1tcg _vchh1ntv _10y4glyw"
};
const logoContainerStyles = {
  root: "_18zru2gc _1e0cglyw _p12fnklw _vchh1ntv _10y41txw"
};

/**
 * __Custom logo__
 *
 * Custom logo for the top navigation.
 *
 * To provide a responsive experience, it requires both a logo and an icon component.
 * The logo component will be used for large viewports, and the icon component will be used for small viewports.
 */
export const CustomLogo = ({
  href,
  logo,
  icon,
  onClick,
  label
}) => {
  const ref = useRef(null);
  useEffect(() => {
    var _img$parentElement, _img$parentElement2;
    if (process.env.NODE_ENV === 'production') {
      return;
    }
    if (!ref.current) {
      return;
    }
    const img = ref.current.querySelector('img');
    if (!img) {
      return;
    }

    /**
     * We want custom logo components to render the image as the immediate child
     */
    const hasExpectedStructure = ((_img$parentElement = img.parentElement) === null || _img$parentElement === void 0 ? void 0 : _img$parentElement.parentElement) === ref.current;
    /**
     * We want custom logo components to render only one image
     */
    const isOnlyChild = ((_img$parentElement2 = img.parentElement) === null || _img$parentElement2 === void 0 ? void 0 : _img$parentElement2.childElementCount) === 1;
    if (!hasExpectedStructure || !isOnlyChild) {
      // eslint-disable-next-line no-console
      console.error('Custom logos should render only a single image tag with no wrappers.');
    }
    if (img.getAttribute('width') !== null || img.getAttribute('height') !== null || img.style.width !== '' || img.style.height !== '') {
      // eslint-disable-next-line no-console
      console.error('Do not set explicit dimensions on custom logo images. The container will resize the image to fit.');
    }
  }, []);
  const hasCustomTheme = useHasCustomTheme();
  return /*#__PURE__*/React.createElement(Anchor, {
    ref: ref,
    "aria-label": label,
    href: href
    // @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
    // eslint-disable-next-line @compiled/no-suppress-xcss
    ,
    xcss: cx(anchorStyles.root, anchorStyles.customLogoBorderRadius, anchorStyles.newMargin, hasCustomTheme ? anchorStyles.newInteractionStatesCustomTheming : anchorStyles.newInteractionStates),
    onClick: onClick
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([sharedIconOrLogoContainerStyles.root, iconContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
  }, /*#__PURE__*/React.createElement(LogoRenderer, {
    logoOrIcon: icon
  })), /*#__PURE__*/React.createElement("div", {
    className: ax([sharedIconOrLogoContainerStyles.root, logoContainerStyles.root, fg('platform-team25-app-icon-tiles') && sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged])
  }, /*#__PURE__*/React.createElement(LogoRenderer, {
    logoOrIcon: logo
  })));
};