import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/es.array.concat.js";
import "core-js/modules/es.string.trim.js";
import React, { useEffect, useMemo, useState } from 'react';
import './index.css';
import { getNameColor, splitName } from './helper';
import { jsx as _jsx } from "react/jsx-runtime";
export var FcrAvatar = function FcrAvatar(_ref) {
  var size = _ref.size,
    textSize = _ref.textSize,
    nickName = _ref.nickName,
    icon = _ref.icon,
    backgroundColor = _ref.backgroundColor,
    onClick = _ref.onClick,
    isShowFirstLetter = _ref.isShowFirstLetter,
    borderRadius = _ref.borderRadius,
    avatarImage = _ref.avatarImage;
  var name = useMemo(function () {
    return nickName ? nickName.trim() : nickName;
  }, [nickName]);
  var color = backgroundColor || getNameColor(name);
  var _splitName = splitName(name),
    _splitName2 = _slicedToArray(_splitName, 2),
    first = _splitName2[0],
    last = _splitName2[1];
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    imgLoaded = _useState2[0],
    setImgLoaded = _useState2[1];
  useEffect(function () {
    if (avatarImage) {
      var img = new Image();
      img.src = avatarImage;
      img.onload = function () {
        setImgLoaded(true);
      };
    }
  }, [avatarImage]);
  return /*#__PURE__*/_jsx("div", {
    onClick: onClick,
    className: "fcr-avatar",
    style: {
      width: size,
      height: size,
      background: color,
      fontSize: textSize,
      borderRadius: borderRadius || ''
    },
    children: !!icon ? icon : avatarImage && imgLoaded ? /*#__PURE__*/_jsx("img", {
      className: "fcr-avatar-img",
      src: avatarImage,
      alt: "avatar"
    }) : /*#__PURE__*/_jsx("span", {
      children: isShowFirstLetter ? first : "".concat(first).concat(last)
    })
  });
};