import React__default from 'react';
import '@emotion/core';
import { a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import { u as useId } from './auto-id.esm-d84df351.js';
import { u as useCustomCss, a as usePrevious } from './utilities-357c56e6.js';

var UserChip = function (_a) {
    var displayName = _a.displayName, photoURL = _a.photoURL, _b = _a.size, size = _b === void 0 ? 'small' : _b, userProvidedId = _a.id, _c = _a.customCss, customCss = _c === void 0 ? '' : _c, _d = _a.placeholderSrc, placeholderSrc = _d === void 0 ? 'https://icon-library.com/images/default-profile-icon/default-profile-icon-5.jpg' : _d, onClick = _a.onClick;
    var id = useId(userProvidedId);
    var resolvedCss = useCustomCss(customCss);
    var _e = React__default.useState(true), loading = _e[0], setLoading = _e[1];
    var _f = React__default.useState(placeholderSrc), currentSrc = _f[0], updateSrc = _f[1];
    var prevPhotoUrl = usePrevious(photoURL);
    React__default.useEffect(function () {
        if ((loading || prevPhotoUrl !== photoURL) && photoURL) {
            var imageToLoad = new Image();
            imageToLoad.src = photoURL;
            imageToLoad.onload = function () {
                setLoading(false);
                updateSrc(photoURL);
            };
        }
    }, [photoURL, loading, prevPhotoUrl]);
    if (onClick) {
        return (jsx(StyledChipButton, __assign({ id: id, css: resolvedCss, onClick: onClick }, { children: jsxs(StyledWrapperDiv, __assign({ "data-size": size }, { children: [jsx(StyledImgDiv, { src: currentSrc, "data-size": size }, void 0),
                    jsx(StyledTitleDiv, __assign({ "data-size": size }, { children: displayName }), void 0)] }), void 0) }), void 0));
    }
    else {
        return (jsx(StyledChipSpan, __assign({ id: id, css: resolvedCss }, { children: jsxs(StyledWrapperDiv, __assign({ "data-size": size }, { children: [jsx(StyledImgDiv, { src: currentSrc, "data-size": size }, void 0),
                    jsx(StyledTitleDiv, __assign({ "data-size": size }, { children: displayName }), void 0)] }), void 0) }), void 0));
    }
};
var StyledChipButton = styled('button')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: #ffffff;\n  border-radius: 20px 6px 6px 20px;\n  border: none;\n  outline: none;\n  opacity: 1;\n  padding: 0px;\n  max-width: fit-content;\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:hover {\n    background: #eaeaea;\n  }\n"], ["\n  background: #ffffff;\n  border-radius: 20px 6px 6px 20px;\n  border: none;\n  outline: none;\n  opacity: 1;\n  padding: 0px;\n  max-width: fit-content;\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:hover {\n    background: #eaeaea;\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var StyledChipSpan = styled('span')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 20px 6px 6px 20px;\n  outline: none;\n  opacity: 1;\n  max-width: fit-content;\n  min-width: 81px;\n"], ["\n  border-radius: 20px 6px 6px 20px;\n  outline: none;\n  opacity: 1;\n  max-width: fit-content;\n  min-width: 81px;\n"])));
var StyledWrapperDiv = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  &[data-size='small'] {\n    padding: 3px;\n  }\n  &[data-size='medium'] {\n    padding: 4px;\n  }\n  &[data-size='large'] {\n    padding: 5px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  &[data-size='small'] {\n    padding: 3px;\n  }\n  &[data-size='medium'] {\n    padding: 4px;\n  }\n  &[data-size='large'] {\n    padding: 5px;\n  }\n"])));
var StyledImgDiv = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center center;\n  border-radius: 50%;\n  border: 1px solid #b9b9b9;\n  &[data-size='small'] {\n    width: 18px;\n    height: 18px;\n  }\n  &[data-size='medium'] {\n    width: 22px;\n    height: 22px;\n  }\n  &[data-size='large'] {\n    width: 26px;\n    height: 26px;\n  }\n"], ["\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center center;\n  border-radius: 50%;\n  border: 1px solid #b9b9b9;\n  &[data-size='small'] {\n    width: 18px;\n    height: 18px;\n  }\n  &[data-size='medium'] {\n    width: 22px;\n    height: 22px;\n  }\n  &[data-size='large'] {\n    width: 26px;\n    height: 26px;\n  }\n"])), function (_a) {
    var src = _a.src;
    return src;
});
var StyledTitleDiv = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  text-align: left;\n  font-weight: 600;\n  &[data-size='small'] {\n    font-size: 14px;\n    padding-left: 4px;\n  }\n  &[data-size='medium'] {\n    font-size: 16px;\n    padding-left: 5px;\n  }\n  &[data-size='large'] {\n    font-size: 18px;\n    padding-left: 6px;\n  }\n"], ["\n  display: block;\n  text-align: left;\n  font-weight: 600;\n  &[data-size='small'] {\n    font-size: 14px;\n    padding-left: 4px;\n  }\n  &[data-size='medium'] {\n    font-size: 16px;\n    padding-left: 5px;\n  }\n  &[data-size='large'] {\n    font-size: 18px;\n    padding-left: 6px;\n  }\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

export { UserChip };
//# sourceMappingURL=UserChip.js.map
