import React, { useState, useEffect } from 'react';
import { d as _objectWithoutProperties, c as _slicedToArray, e as _extends } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import Text from './text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import Box from './box.js';

var BoxStyle = function BoxStyle(props) {
  return {
    height: props.size,
    width: props.size,
    padding: 0,
    borderRadius: "50%",
    overflow: "hidden",
    lineHeight: "19px",
    backgroundColor: props.theme.colors.grey.neon,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  };
};

var IntialsBox = styled(Box)(BoxStyle);

var ImgStyle = function ImgStyle(props) {
  return {
    height: "auto",
    width: props.size
  };
};

var Img = styled("img")(ImgStyle);
var UppercaseText = styled(Text)({
  textTransform: "uppercase"
});

var Avatar = function Avatar(_ref) {
  var url = _ref.url,
      initials = _ref.initials,
      size = _ref.size,
      styleProps = _objectWithoutProperties(_ref, ["url", "initials", "size"]);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isValidUrl = _useState2[0],
      setIsValidUrl = _useState2[1];

  useEffect(function () {
    if (!url) return;
    var s = document.createElement("IMG");
    s.src = url;

    s.onload = function () {
      setIsValidUrl(true);
    };
  }, [url]);
  return React.createElement(Box, _extends({
    "data-testid": "avatar-wrapper",
    padding: "zero",
    height: size,
    alignItems: "center"
  }, styleProps), isValidUrl ? React.createElement(Img, {
    src: url,
    "data-testid": "icon",
    size: size
  }) : React.createElement(IntialsBox, {
    "data-testid": "avatar-box",
    size: size
  }, React.createElement(UppercaseText, {
    variant: "h3.semi-bold",
    color: "grey.deep",
    "data-testid": "avatar-text"
  }, initials)));
};

Avatar.propTypes = {
  /** URL to fetch Avatar/Profile image */
  url: PropTypes.string,

  /** Initials text is used to show in the absense of URL or during loading */
  initials: PropTypes.string.isRequired,

  /** Size of the Avatar */
  size: PropTypes.string
};
Avatar.defaultProps = {
  url: "",
  size: "40px"
};
var Avatar$1 = React.memo(Avatar);
Avatar.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Avatar",
  "props": {
    "url": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "URL to fetch Avatar/Profile image"
    },
    "size": {
      "defaultValue": {
        "value": "\"40px\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Size of the Avatar"
    },
    "initials": {
      "type": {
        "name": "string"
      },
      "required": true,
      "description": "Initials text is used to show in the absense of URL or during loading"
    }
  }
};

export default Avatar$1;
