// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { Persona } from '@fluentui/react';
import React, { useEffect, useState } from 'react';
import { mergeStyles } from '@fluentui/react';
/**
 * An Avatar component made using the `Persona` component.
 * It allows you to specify a `userId` and a `dataProvider` to retrieve the `AvatarPersonaData`.
 * Read more about `Persona` component at https://developer.microsoft.com/fluentui#/controls/web/persona
 *
 * @private
 */
export const AvatarPersona = (props) => {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
    const [data, setData] = useState();
    useEffect(() => {
        (() => __awaiter(void 0, void 0, void 0, function* () {
            if (dataProvider && userId) {
                const newData = yield dataProvider(userId);
                if (avatarDeepDifferenceCheck(data, newData)) {
                    setData(newData);
                }
            }
        }))();
    }, [data, dataProvider, userId]);
    let activePersona = '';
    if (props.allowActiveBorder) {
        // Display a border for raised handed participants in participant list
        activePersona = mergeStyles({
            border: 'solid 2px',
            borderColor: 'transparent',
            borderRadius: '50%',
            padding: '2px',
            boxSizing: 'content-box',
            margin: '-4px'
        });
        mergeStyles(activePersona, props.styles);
    }
    return React.createElement(Persona, Object.assign({}, props, { className: activePersona, text: (_a = data === null || data === void 0 ? void 0 : data.text) !== null && _a !== void 0 ? _a : text, imageUrl: (_b = data === null || data === void 0 ? void 0 : data.imageUrl) !== null && _b !== void 0 ? _b : imageUrl, imageInitials: (_c = data === null || data === void 0 ? void 0 : data.imageInitials) !== null && _c !== void 0 ? _c : imageInitials, initialsColor: (_d = data === null || data === void 0 ? void 0 : data.initialsColor) !== null && _d !== void 0 ? _d : initialsColor, initialsTextColor: (_f = (_e = data === null || data === void 0 ? void 0 : data.initialsTextColor) !== null && _e !== void 0 ? _e : initialsTextColor) !== null && _f !== void 0 ? _f : 'white', 
        // default disable tooltip unless specified
        showOverflowTooltip: showOverflowTooltip !== null && showOverflowTooltip !== void 0 ? showOverflowTooltip : false, showUnknownPersonaCoin: (_h = (_g = data === null || data === void 0 ? void 0 : data.showUnknownPersonaCoin) !== null && _g !== void 0 ? _g : props.showUnknownPersonaCoin) !== null && _h !== void 0 ? _h : false }));
};
const avatarDeepDifferenceCheck = (currentData, newData) => {
    return (currentData === null || currentData === void 0 ? void 0 : currentData.text) !== (newData === null || newData === void 0 ? void 0 : newData.text) || (currentData === null || currentData === void 0 ? void 0 : currentData.imageUrl) !== (newData === null || newData === void 0 ? void 0 : newData.imageUrl) || (currentData === null || currentData === void 0 ? void 0 : currentData.initialsColor) !== (newData === null || newData === void 0 ? void 0 : newData.initialsColor) || (currentData === null || currentData === void 0 ? void 0 : currentData.imageInitials) !== (newData === null || newData === void 0 ? void 0 : newData.imageInitials) || (currentData === null || currentData === void 0 ? void 0 : currentData.initialsTextColor) !== (newData === null || newData === void 0 ? void 0 : newData.initialsTextColor);
};
//# sourceMappingURL=AvatarPersona.js.map