import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import cx from 'classnames';
import theme from './theme.css';
import AvatarOverlay from './AvatarOverlay';

var AvatarImage = function AvatarImage(_ref) {
  var children = _ref.children,
      editable = _ref.editable,
      image = _ref.image,
      imageAlt = _ref.imageAlt,
      onImageChange = _ref.onImageChange,
      size = _ref.size,
      onImageLoadFailure = _ref.onImageLoadFailure;

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

  var handleOnMouseEnter = function handleOnMouseEnter() {
    setDisplayAvatarOverlay(true);
  };

  var handleOnMouseLeave = function handleOnMouseLeave() {
    setDisplayAvatarOverlay(false);
  };

  var shouldShowAvatarOverlay = editable && (size === 'large' || size === 'hero' || size === 'medium' && displayAvatarOverlay);
  return /*#__PURE__*/React.createElement("div", {
    className: cx(theme['avatar'], theme['avatar-image']),
    "data-teamleader-ui": "avatar-image",
    onMouseEnter: handleOnMouseEnter,
    onMouseLeave: handleOnMouseLeave
  }, /*#__PURE__*/React.createElement("img", {
    alt: imageAlt,
    onError: onImageLoadFailure,
    src: image,
    className: theme['image']
  }), shouldShowAvatarOverlay && /*#__PURE__*/React.createElement(AvatarOverlay, {
    onClick: onImageChange,
    size: size
  }), children && /*#__PURE__*/React.createElement("div", {
    className: theme['children']
  }, children));
};

export default AvatarImage;