import { jsx, css } from '@emotion/core';
import _pt from 'prop-types';
import { DEFAULT_SIZE, placeholderFontSizes } from './constants.esm.js';
import AvatarSkeleton from './AvatarSkeleton.esm.js';
import { fitText } from './Avatar.helpers.esm.js';

var imageCss = css({
  objectFit: "cover",
  width: "100%",
  height: "100%",
  padding: 0,
  margin: 0
});
var maxFallbackTextWidth = {
  XS: 0.9,
  S: 0.9,
  M: 0.9,
  L: 0.8,
  XL: 0.8,
  XXL: 0.8
};
function Avatar(_ref) {
  var src = _ref.src,
      fallback = _ref.fallback,
      label = _ref.label,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? DEFAULT_SIZE : _ref$size,
      _ref$borderColor = _ref.borderColor,
      borderColor = _ref$borderColor === void 0 ? null : _ref$borderColor,
      className = _ref.className,
      style = _ref.style;
  var textFitter = fitText({
    maxWidth: maxFallbackTextWidth[size],
    minFontSizeInRem: parseFloat(placeholderFontSizes.XS),
    maxFontSizeInRem: parseFloat(placeholderFontSizes[size])
  });
  return jsx(AvatarSkeleton, {
    size: size,
    borderColor: borderColor,
    className: className,
    style: style,
    title: label
  }, src ? jsx("img", {
    css: imageCss,
    src: src,
    alt: label
  }) : jsx("span", {
    "aria-label": label,
    ref: textFitter
  }, fallback));
}
Avatar.propTypes = {
  src: _pt.string.isRequired,
  label: _pt.string.isRequired,
  fallback: _pt.node,
  size: _pt.oneOf(["XS", "S", "M", "L", "XL", "XXL"]),
  borderColor: _pt.oneOfType([_pt.string, _pt.oneOf([null])]),
  fitTextFallback: _pt.bool,
  className: _pt.string
};
Avatar.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Avatar",
  "props": {
    "size": {
      "defaultValue": {
        "value": "DEFAULT_SIZE",
        "computed": true
      },
      "required": false,
      "tsType": {
        "name": "union",
        "raw": "\"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" | \"XXL\"",
        "elements": [{
          "name": "literal",
          "value": "\"XS\""
        }, {
          "name": "literal",
          "value": "\"S\""
        }, {
          "name": "literal",
          "value": "\"M\""
        }, {
          "name": "literal",
          "value": "\"L\""
        }, {
          "name": "literal",
          "value": "\"XL\""
        }, {
          "name": "literal",
          "value": "\"XXL\""
        }]
      },
      "description": ""
    },
    "borderColor": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "union",
        "raw": "string | null",
        "elements": [{
          "name": "string"
        }, {
          "name": "null"
        }]
      },
      "description": ""
    },
    "src": {
      "required": true,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "label": {
      "required": true,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "fallback": {
      "required": false,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "fitTextFallback": {
      "required": false,
      "tsType": {
        "name": "boolean"
      },
      "description": ""
    },
    "className": {
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "style": {
      "required": false,
      "tsType": {
        "name": "ReactCSSProperties",
        "raw": "React.CSSProperties"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Avatar/Avatar.tsx"] = {
    name: "Avatar",
    docgenInfo: Avatar.__docgenInfo,
    path: "src/components/Avatar/Avatar.tsx"
  };
}

export default Avatar;
//# sourceMappingURL=Avatar.esm.js.map
