'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-f9c7d71b.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 ChatBubble = function (_a) {
    var author = _a.author, date = _a.date, imgSrc = _a.imgSrc, _b = _a.placeholderSrc, placeholderSrc = _b === void 0 ? 'https://icon-library.com/images/default-profile-icon/default-profile-icon-5.jpg' : _b, _c = _a.imgPosition, imgPosition = _c === void 0 ? 'right' : _c, userProvidedId = _a.id, _d = _a.customCss, customCss = _d === void 0 ? '' : _d, children = _a.children, props = _tslib.__rest(_a, ["author", "date", "imgSrc", "placeholderSrc", "imgPosition", "id", "customCss", "children"]);
    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__default['default'].useState(placeholderSrc), currentSrc = _f[0], updateSrc = _f[1];
    var prevImgSrc = utilities.usePrevious(imgSrc);
    React__default['default'].useEffect(function () {
        if ((loading || prevImgSrc !== imgSrc) && imgSrc) {
            var imageToLoad = new Image();
            imageToLoad.src = imgSrc;
            imageToLoad.onload = function () {
                setLoading(false);
                updateSrc(imgSrc);
            };
        }
    }, [imgSrc, loading, prevImgSrc]);
    return (jsxRuntime.jsxs(OuterWrapper, _tslib.__assign({ id: id, css: resolvedCss }, props, { children: [author && (jsxRuntime.jsxs(AuthorWrapper, { children: [author, date && (jsxRuntime.jsxs(DateWrapper, { children: [' - ', date] }, void 0))] }, void 0)),
            jsxRuntime.jsx(BubbleWrapper, { children: children }, void 0),
            jsxRuntime.jsx(StyledImgDiv, { "data-imgpos": imgPosition, src: currentSrc }, void 0)] }), void 0));
};
var BubbleWrapper = css.styled('div')(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background-color: white;\n  border-radius: 10px;\n  padding: 8px 12px;\n  width: 180px;\n  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.09);\n  font-size: 0.7em;\n  line-height: 1.2em;\n  position: relative;\n"], ["\n  background-color: white;\n  border-radius: 10px;\n  padding: 8px 12px;\n  width: 180px;\n  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.09);\n  font-size: 0.7em;\n  line-height: 1.2em;\n  position: relative;\n"])));
var StyledImgDiv = css.styled('div')(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center center;\n  border-radius: 50%;\n  border: 1px solid #b9b9b9;\n  width: 22px;\n  height: 22px;\n  position: absolute;\n  &[data-imgpos='right'] {\n    bottom: 0;\n    left: 178px;\n  }\n  &[data-imgpos='left'] {\n    bottom: 0;\n    left: 0;\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  width: 22px;\n  height: 22px;\n  position: absolute;\n  &[data-imgpos='right'] {\n    bottom: 0;\n    left: 178px;\n  }\n  &[data-imgpos='left'] {\n    bottom: 0;\n    left: 0;\n  }\n"])), function (_a) {
    var src = _a.src;
    return src;
});
var OuterWrapper = css.styled('div')(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  background-color: transparent;\n  position: relative;\n  padding: 10px;\n  width: 200px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"], ["\n  background-color: transparent;\n  position: relative;\n  padding: 10px;\n  width: 200px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])));
var AuthorWrapper = css.styled('div')(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  align-self: flex-start;\n  display: flex;\n  flex-direction: row;\n  margin: 2px;\n  text-align: left;\n  font-size: 0.65em;\n  font-weight: 600;\n"], ["\n  align-self: flex-start;\n  display: flex;\n  flex-direction: row;\n  margin: 2px;\n  text-align: left;\n  font-size: 0.65em;\n  font-weight: 600;\n"])));
var DateWrapper = css.styled('div')(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  font-weight: 500;\n  font-style: italic;\n  margin-left: 2px;\n"], ["\n  font-weight: 500;\n  font-style: italic;\n  margin-left: 2px;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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