"use client";
import { getFontColor } from "../../styles/themes.js";
import { isString } from "../../utils/strings.js";
import "../../styles/common.js";
import { invertFillColor, invertStrokeColor } from "../../icons/constants.js";
import { iconMap } from "./types.js";
import styled from "@emotion/styled";
import React from "react";
import { jsx } from "@emotion/react/jsx-runtime";
//#region src/components/Icon/Icon.tsx
function Icon({ className, name, width, square = false, tutorialStep, id, mr: mrProp = 0, ml: mlProp = 0, mt: mtProp = 0, mb: mbProp = 0, color = void 0, verticalAlign = "middle", iconProps }) {
	const IconComponent = iconMap[name];
	/** Assume width is px relative to the root font size but specify
	* in ems to preserve scale for larger font sizes */
	const w = parseFloat((width / 12).toFixed(2));
	const h = square ? w : "auto";
	const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / 12).toFixed(2))}em` : mrProp;
	const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / 12).toFixed(2))}em` : mlProp;
	const mt = typeof mtProp === "number" ? `${parseFloat((mtProp / 12).toFixed(2))}em` : mtProp;
	const mb = typeof mbProp === "number" ? `${parseFloat((mbProp / 12).toFixed(2))}em` : mbProp;
	const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / 12).toFixed(2));
	const icon = React.createElement(IconComponent, iconProps, null);
	return /* @__PURE__ */ jsx(IconContainer, {
		id,
		className,
		w,
		h,
		square,
		mr,
		ml,
		mt,
		mb,
		verticalAlign: va,
		fontColor: color,
		"data-tutorial-tip": tutorialStep?.toString(),
		children: icon
	});
}
const IconContainer = styled.span`
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  ${({ mr, ml, mt, mb, w, h }) => `
    width: ${w}em;
    height: ${typeof h === "number" ? `${h}em` : h};
    /* ensure no shrink in flex containers: */
    min-width: ${w}em;
    ${mr ? `margin-right: ${mr};` : ""}
    ${ml ? `margin-left: ${ml};` : ""}
    ${mt ? `margin-top: ${mt};` : ""}
    ${mb ? `margin-bottom: ${mb};` : ""}
  `}

  vertical-align: ${({ verticalAlign }) => isString(verticalAlign) ? verticalAlign : `${verticalAlign}em`};

  ${({ square }) => {
	return square ? `
      svg {
        width: 100%;
        height: 100%;
      }
    ` : "";
}}

  ${({ theme, fontColor }) => {
	const color = getFontColor(theme, fontColor, "inherit");
	return `
    svg, path {
      color: ${getFontColor(theme, fontColor, "inherit")};

      /* 
        Provide a way for an SVG to invert relative to a specified color for
        dark mode support. Ideally we would just use filters, which works in
        Chrome even if the color is not specified, but doesn't work at all for
        SVG paths in Safari:
        filter: invert(100%); -webkit-filter: invert(100%);

        Instead we'll need a class for fills and a class for strokes. Icons
        that need inverted colors should use these classes on their paths.
      */

      .${invertFillColor} {
        fill: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
      }
      .${invertStrokeColor} {
        stroke: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
      }
    }
  `;
}}
`;
//#endregion
export { Icon, IconContainer };
