'use strict';

var React = require('react');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
var index = require('./index-af9c3c64.js');
var index$1 = require('./index-a31ed3e1.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n["default"] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

/* eslint-disable prettier/prettier */
const Pin3 = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 12 12", fill: "none" }, props),
    React__namespace.createElement("g", { clipPath: "url(#clip0_5371_10640)" },
        React__namespace.createElement("path", { d: "M6.6665 4.3335L8.1665 5.8335L6.6665 7.3335", stroke: "#8C8C8C", strokeWidth: 0.72, strokeLinecap: "round", strokeLinejoin: "round" }),
        React__namespace.createElement("path", { d: "M8.16667 5.8335H5.83333C5.09667 5.8335 4.5 6.43016 4.5 7.16683V7.50016", stroke: "#8C8C8C", strokeWidth: 0.72, strokeLinecap: "round", strokeLinejoin: "round" }),
        React__namespace.createElement("path", { d: "M6.94331 10.3902L10.3907 6.94281C10.9114 6.42211 10.9114 5.57789 10.3907 5.05719L6.94331 1.60981C6.42261 1.08911 5.57839 1.08911 5.05769 1.60981L1.61031 5.05719C1.08961 5.57789 1.08961 6.42211 1.61031 6.94281L5.05769 10.3902C5.57839 10.9109 6.42261 10.9109 6.94331 10.3902Z", stroke: "#8C8C8C", strokeWidth: 0.72, strokeLinecap: "round", strokeLinejoin: "round" })),
    React__namespace.createElement("defs", null,
        React__namespace.createElement("clipPath", { id: "clip0_5371_10640" },
            React__namespace.createElement("rect", { width: 12, height: 12, fill: "white" })))));

/* eslint-disable prettier/prettier */
const ShapedArrowDown = (props) => (React__namespace.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none" }, props),
    React__namespace.createElement("path", { d: "M13.5554 9.33398L7.99989 5.55621L2.44434 9.33398", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" })));

const StyledAvatar = styled__default["default"].div `
  background-color: var(--background-color, transparent);
  color: white;
  cursor: pointer;
  img {
    --width: var(--width-prop, 40px);
    --height: var(--height-prop, 40px);
    width: var(--width);
    height: var(--height);
  }
  &[data-has-max='true'] {
    img {
      max-width: var(--width);
      max-height: var(--height);
    }
  }

  &[data-avatar-type='square'] {
    img {
      --width: var(--width-prop, 72px);
      --height: var(--height-prop, 72px);
      border-radius: ${miscTheme.theme.borderRadius};
    }
  }

  &[data-avatar-type='rounded'] {
    img {
      border-radius: 50%;
    }
  }

  &[data-custom-size='true'] {
    display: flex;
    overflow: hidden;
    overflow: hidden;
    width: var(--size);
    height: var(--size);
    align-items: center;
    justify-content: center;
    background-size: cover;
    font-size: calc(var(--size) / 2);
    font-weight: bold;
    &[data-avatar-type='square'] {
      border-radius: ${miscTheme.theme.borderRadius};
    }
    &[data-avatar-type='rounded'] {
      border-radius: 50%;
      img {
        --width: 100%;
        --height: 100%;
      }
    }
    img {
      object-fit: cover;
    }
  }
`;

const pxBySize = {
    xs: 28,
    small: 32,
    medium: 40,
    large: 48,
    xl: 64,
    xxl: 80,
    xxxl: 96,
};
/**
 * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
 */
const Avatar = ({ type = 'square', size, avatarImg, avatarUrl, firstLetter, backgroundColor, onClick, style, className, width, height, alt, }) => {
    const sizePx = size ? pxBySize[size] : undefined;
    const [isImageLoadingError, setIsImageLoadingError] = React.useState(false);
    React.useEffect(() => {
        if (avatarUrl) {
            const img = document.createElement('img');
            img.setAttribute('src', avatarUrl);
            img.addEventListener('error', () => {
                setIsImageLoadingError(true);
            });
        }
    }, [avatarUrl, setIsImageLoadingError]);
    const shouldRenderLetter = ((!avatarUrl && !avatarImg) || isImageLoadingError) && firstLetter;
    return (React__namespace["default"].createElement(StyledAvatar, { style: Object.assign(Object.assign({}, style), { '--size': sizePx ? sizePx + 'px' : undefined, '--width-prop': width ? width + 'px' : undefined, '--height-prop': height ? height + 'px' : undefined, '--background-color': backgroundColor }), "data-has-max": !!(width && height), "data-avatar-type": type, onClick: onClick, className: className, avatarUrl: avatarUrl, "data-custom-size": !!size },
        avatarImg,
        avatarUrl && !isImageLoadingError && (React__namespace["default"].createElement(index.ImageWrap, { src: avatarUrl, alt: alt || 'avatar' })),
        shouldRenderLetter && firstLetter));
};

const DistanceTagStyled = styled__default["default"].div `
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  color: ${miscTheme.theme.colors.red700};
  border-radius: 8px;
  border: 1px solid ${miscTheme.theme.colors.neutral100};
  font-size: 0.6875rem;
  line-height: 1rem;
  border-radius: 0.5rem;
`;
const StyledPin3 = styled__default["default"](Pin3) `
  width: 0.75rem;
  height: 0.75rem;
  color: ${miscTheme.theme.colors.gray400};
`;

function DistanceTag({ value, className }) {
    return (React__namespace["default"].createElement(DistanceTagStyled, { className: className },
        React__namespace["default"].createElement(StyledPin3, null),
        React__namespace["default"].createElement(index$1.Text, { size: "p3", weight: "regular", color: miscTheme.theme.colors.gray400 }, value)));
}

const StyledIconWrapper = styled__default["default"].div `
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;

  width: calc(var(--wrapper-size, var(--icon-size)) * 1px);
  height: calc(var(--wrapper-size, var(--icon-size)) * 1px);

  &[data-clickable='true'] {
    cursor: pointer;
  }

  > * {
    width: calc(var(--icon-size) * 1px);
    height: calc(var(--icon-size) * 1px);
  }

  &[data-svg-custom-stroke='true'] > svg * {
    stroke: var(--icon-stroke-color);
  }
  &[data-svg-custom-fill='true'] > svg * {
    fill: var(--icon-fill-color);
  }
`;

/**
 * Wrapper for icon
 * You can use this component to wrap your icon with custom size and style
 * With svgIcon you can set fill and stroke color as well
 */
const IconWrapper = ({ children, className, onClick, wrapperSize, iconSize = 24, wrapperStyle, iconStyle, svgIcon, wrapperProps, }) => {
    return (React__namespace["default"].createElement(StyledIconWrapper, Object.assign({ className: className, onClick: onClick, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (wrapperSize && { '--wrapper-size': wrapperSize })), (iconSize && { '--icon-size': iconSize })), (svgIcon && Object.assign(Object.assign({}, (svgIcon.fill && { '--icon-fill-color': svgIcon.fill })), (svgIcon.stroke && { '--icon-stroke-color': svgIcon.stroke })))), wrapperStyle), "data-clickable": !!onClick, "data-svg-custom-stroke": !!(svgIcon === null || svgIcon === void 0 ? void 0 : svgIcon.stroke), "data-svg-custom-fill": !!(svgIcon === null || svgIcon === void 0 ? void 0 : svgIcon.fill) }, wrapperProps), React__namespace["default"].cloneElement(children, {
        style: iconStyle,
    })));
};

exports.Avatar = Avatar;
exports.DistanceTag = DistanceTag;
exports.IconWrapper = IconWrapper;
exports.Pin3 = Pin3;
exports.ShapedArrowDown = ShapedArrowDown;
