import React__default from 'react';
import classnames from 'classnames';
import Color from 'color';
import { I as Icon } from './Icon-es.js';

var styles = {"avatar":"QJpdGzG71k8-","large":"bexrcoi1lZk-","small":"xytAyzEap3U-","isDark":"E0Pgej0H3YA-","initials":"_85roPa-UvXQ-","smallInitials":"meLH-BCeXWU-","hasBorder":"OsEsZnEnjLc-","spinning":"VkgQaQlBDig-"};

function isDark(colorToCheck) {
    if (colorToCheck == undefined) {
        return false;
    }
    if (colorToCheck) {
        try {
            return Color(deconstructCssCustomProperty(colorToCheck)).isDark();
        }
        catch (err) {
            console.log(err);
        }
    }
    return false;
}
function deconstructCssCustomProperty(color) {
    if (!color) {
        return;
    }
    if (!color.toLowerCase().startsWith("var(")) {
        return color;
    }
    /**
     * Rips apart the `var(--custom-property)` into just `--custom-property`.
     */
    const customProperty = color
        .replace("var(", "")
        .slice(0, -1)
        .split(" ")
        .join("");
    return getComputedStyle(document.documentElement)
        .getPropertyValue(customProperty)
        .trim();
}

function Avatar({ imageUrl, name, initials, size = "base", color, UNSAFE_className = {}, UNSAFE_style = {}, }) {
    const style = Object.assign({ backgroundColor: color, borderColor: color }, UNSAFE_style.container);
    if (imageUrl) {
        style.backgroundImage = `url(${imageUrl})`;
    }
    const shouldBeDark = color == undefined || isDark(color);
    const className = classnames(styles.avatar, size !== "base" && styles[size], {
        [styles.hasBorder]: imageUrl && color,
        [styles.isDark]: shouldBeDark,
    });
    const containerClassNames = classnames(className, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
    return (React__default.createElement("div", { className: containerClassNames, style: style, role: imageUrl && "img", "aria-label": name }, !imageUrl && (React__default.createElement(Initials, { initials: initials, dark: shouldBeDark, iconSize: size, UNSAFE_className: {
            initials: UNSAFE_className.initials,
            fallbackIcon: UNSAFE_className.fallbackIcon,
        }, UNSAFE_style: {
            initials: UNSAFE_style.initials,
            fallbackIcon: UNSAFE_style.fallbackIcon,
        } }))));
}
function Initials({ initials, dark = false, iconSize = "base", UNSAFE_className, UNSAFE_style, }) {
    if (!initials) {
        return (React__default.createElement(Icon, { name: "person", color: dark ? "white" : "blue", size: iconSize, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.fallbackIcon, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.fallbackIcon }));
    }
    const className = classnames(styles.initials, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.initials, {
        [styles.smallInitials]: initials.length > 2,
    });
    return (React__default.createElement("span", { className: className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.initials }, initials.substr(0, 3)));
}

export { Avatar as A };
