'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
require('@emotion/core');
var _tslib = require('./_tslib-9c546438.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
require('@emotion/styled');
require('@emotion/react');
var css = require('./css-203af057.js');
var autoId_esm = require('./auto-id.esm-3b4575a4.js');
var utilities = require('./utilities-d51a0c2d.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var UserCard = function (_a) {
    var displayName = _a.displayName, username = _a.username, _b = _a.photoURL, photoURL = _b === void 0 ? '' : _b, userProvidedId = _a.id, _c = _a.placeholderSrc, placeholderSrc = _c === void 0 ? 'https://icon-library.com/images/default-profile-icon/default-profile-icon-5.jpg' : _c, onClick = _a.onClick, _d = _a.customCss, customCss = _d === void 0 ? '' : _d;
    var id = autoId_esm.useId(userProvidedId);
    var resolvedCss = utilities.useCustomCss(customCss);
    var _e = React__default['default'].useState(true), loading = _e[0], setLoading = _e[1];
    var _f = React.useState(placeholderSrc), currentSrc = _f[0], updateSrc = _f[1];
    var prevPhotoUrl = utilities.usePrevious(photoURL);
    React__default['default'].useEffect(function () {
        if (loading || (photoURL && prevPhotoUrl !== photoURL)) {
            var imageToLoad = new Image();
            imageToLoad.src = photoURL;
            imageToLoad.onload = function () {
                setLoading(false);
                updateSrc(photoURL);
            };
        }
    }, [photoURL, loading, prevPhotoUrl]);
    return (jsxRuntime.jsx(StyledCardButton, _tslib.__assign({ onClick: onClick, css: resolvedCss, id: id }, { children: jsxRuntime.jsxs(StyledWrapperDiv, { children: [jsxRuntime.jsx(StyledImgDiv, { src: currentSrc }, void 0),
                jsxRuntime.jsxs(StyledTextDiv, { children: [jsxRuntime.jsx(StyledTitle, { children: displayName }, void 0),
                        jsxRuntime.jsx(StyledSubTitle, { children: username }, void 0)] }, void 0)] }, void 0) }), void 0));
};
var StyledCardButton = css.styled('button')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: rgba(255, 255, 255, 0.36) no-repeat padding-box;\n  border: none;\n  outline: none;\n  border-radius: 20px 6px 6px 20px;\n  opacity: 1;\n  height: 42px;\n  max-width: fit-content;\n  min-width: 171px;\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:hover {\n    background: rgba(255, 255, 255, 0.57);\n  }\n"], ["\n  background: rgba(255, 255, 255, 0.36) no-repeat padding-box;\n  border: none;\n  outline: none;\n  border-radius: 20px 6px 6px 20px;\n  opacity: 1;\n  height: 42px;\n  max-width: fit-content;\n  min-width: 171px;\n  &:focus-visible {\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:hover {\n    background: rgba(255, 255, 255, 0.57);\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var StyledWrapperDiv = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
var StyledImgDiv = css.styled('div')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center center;\n  min-height: 34px;\n  min-width: 34px;\n  width: 34px;\n  height: 34px;\n  border-radius: 50%;\n  border: 1px solid #445b88;\n"], ["\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center center;\n  min-height: 34px;\n  min-width: 34px;\n  width: 34px;\n  height: 34px;\n  border-radius: 50%;\n  border: 1px solid #445b88;\n"])), function (_a) {
    var src = _a.src;
    return src;
});
var StyledTextDiv = css.styled('div')(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: block;\n  text-align: left;\n  padding-left: 7px;\n"], ["\n  display: block;\n  text-align: left;\n  padding-left: 7px;\n"])));
var StyledTitle = css.styled('div')(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 600;\n"], ["\n  font-size: 14px;\n  font-weight: 600;\n"])));
var StyledSubTitle = css.styled('div')(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  font-size: 11px;\n  font-style: italic;\n"], ["\n  font-size: 11px;\n  font-style: italic;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

exports.UserCard = UserCard;
//# sourceMappingURL=UserCard.js.map
