import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["className", "selectable", "selected", "size", "shape", "tooltip", "fullName", "creatable", "children", "editable", "imageUrl", "id", "onImageChange", "team"];
import { IconCloseMediumOutline, IconCloseSmallOutline } from '@teamleader/ui-icons';
import cx from 'classnames';
import React, { useState } from 'react';
import Box from '../box';
import Icon from '../icon';
import Tooltip from '../tooltip';
import { TextBodyCompact } from '../typography';
import AvatarAdd from './AvatarAdd';
import AvatarAnonymous from './AvatarAnonymous';
import AvatarImage from './AvatarImage';
import AvatarInitials from './AvatarInitials';
import AvatarTeam from './AvatarTeam';
import theme from './theme.css';
var TooltippedBox = Tooltip(Box);

var AvatarInternalComponent = function AvatarInternalComponent(_ref) {
  var creatable = _ref.creatable,
      children = _ref.children,
      editable = _ref.editable,
      imageUrl = _ref.imageUrl,
      fullName = _ref.fullName,
      id = _ref.id,
      onImageChange = _ref.onImageChange,
      selected = _ref.selected,
      size = _ref.size,
      team = _ref.team;

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

  var handleImageLoadFailure = function handleImageLoadFailure() {
    setFailedToLoadImage(false);
  };

  var childrenToRender = selected ? /*#__PURE__*/React.createElement(Icon, {
    backgroundColor: "aqua",
    backgroundTint: "dark",
    borderColor: "aqua",
    borderTint: "dark",
    borderRadius: "circle",
    borderWidth: size === 'hero' ? 6 : 2,
    color: "neutral",
    tint: "lightest"
  }, size === 'hero' ? /*#__PURE__*/React.createElement(IconCloseMediumOutline, null) : /*#__PURE__*/React.createElement(IconCloseSmallOutline, null)) : children;

  if (team) {
    return /*#__PURE__*/React.createElement(AvatarTeam, {
      size: size
    });
  }

  if (creatable) {
    return /*#__PURE__*/React.createElement(AvatarAdd, {
      size: size
    }, children);
  }

  if (imageUrl && !failedToLoadImage) {
    return /*#__PURE__*/React.createElement(AvatarImage, {
      editable: editable,
      image: imageUrl,
      imageAlt: fullName,
      onImageChange: onImageChange,
      onImageLoadFailure: handleImageLoadFailure,
      size: size
    }, childrenToRender);
  }

  if (fullName) {
    return /*#__PURE__*/React.createElement(AvatarInitials, {
      editable: editable,
      id: id,
      name: fullName,
      onImageChange: onImageChange,
      size: size
    }, childrenToRender);
  }

  return /*#__PURE__*/React.createElement(AvatarAnonymous, {
    size: size
  }, childrenToRender);
};

var Avatar = function Avatar(_ref2) {
  var _cx;

  var className = _ref2.className,
      _ref2$selectable = _ref2.selectable,
      selectable = _ref2$selectable === void 0 ? false : _ref2$selectable,
      _ref2$selected = _ref2.selected,
      selected = _ref2$selected === void 0 ? false : _ref2$selected,
      _ref2$size = _ref2.size,
      size = _ref2$size === void 0 ? 'medium' : _ref2$size,
      _ref2$shape = _ref2.shape,
      shape = _ref2$shape === void 0 ? 'circle' : _ref2$shape,
      _ref2$tooltip = _ref2.tooltip,
      tooltip = _ref2$tooltip === void 0 ? false : _ref2$tooltip,
      fullName = _ref2.fullName,
      creatable = _ref2.creatable,
      children = _ref2.children,
      editable = _ref2.editable,
      imageUrl = _ref2.imageUrl,
      id = _ref2.id,
      onImageChange = _ref2.onImageChange,
      team = _ref2.team,
      others = _objectWithoutProperties(_ref2, _excluded);

  var avatarClassNames = cx(theme['wrapper'], theme["is-".concat(size)], theme["is-".concat(shape)], (_cx = {}, _defineProperty(_cx, theme['is-selectable'], selectable), _defineProperty(_cx, theme['is-selected'], selected), _cx), className);
  var enableTooltip = tooltip && typeof fullName === 'string' && fullName.length > 0;
  var Component = enableTooltip ? TooltippedBox : Box;
  var tooltipProps = enableTooltip ? {
    tooltip: /*#__PURE__*/React.createElement(TextBodyCompact, null, fullName),
    tooltipColor: 'white',
    tooltipPosition: 'top',
    tooltipSize: 'small'
  } : {};
  return /*#__PURE__*/React.createElement(Component, _extends({}, others, selectable && {
    boxSizing: 'content-box',
    padding: size === 'hero' ? 2 : 1
  }, tooltipProps, {
    className: avatarClassNames
  }), /*#__PURE__*/React.createElement(AvatarInternalComponent, {
    creatable: creatable,
    editable: editable,
    imageUrl: imageUrl,
    fullName: fullName,
    id: id,
    onImageChange: onImageChange,
    selected: selected,
    size: size,
    team: team
  }, children));
};

export default Avatar;