import { __assign } from "tslib";
import { classNamesFunction } from '@uifabric-vue/utilities';
import { Persona } from '../Persona';
import Vue from 'vue';
import { withThemeableProps } from '../../useThemeable';
var getClassNames = classNamesFunction();
export var FacepileBase = Vue.extend({
    name: 'FacepileBase',
    props: __assign(__assign({}, withThemeableProps()), { personas: { type: Array, default: function () { return []; } }, personaSize: { type: Number, default: 11 } }),
    computed: {
        singlePersona: function () {
            return this.personas.length === 1;
        },
        classNames: function () {
            return getClassNames(this.styles, {
                theme: this.theme,
                className: this.className,
            });
        },
    },
    render: function (h) {
        var _a = this, classNames = _a.classNames, personas = _a.personas, singlePersona = _a.singlePersona, personaSize = _a.personaSize;
        var $personas = personas.map(function (persona, index) { return h('li', {
            class: classNames.member,
            key: singlePersona ? 'persona' : "personaCoin-".concat(index),
            attrs: { role: 'option' },
        }, [
            h('div', {
                class: classNames.itemButton,
                attrs: {
                    title: persona.personaName,
                },
            }, [
                h(Persona, {
                    props: __assign(__assign({}, persona), { text: persona.personaName, presence: 2, size: personaSize, styles: {
                            details: {
                                flex: '1 0 auto',
                            },
                        } }),
                }),
            ]),
        ]); });
        return h('div', { class: classNames.root }, [
            // TODO AriaDescription
            h('div', { class: classNames.itemContainer }, [
                // TODO ShowAddButton
                h('ul', {
                    class: classNames.members,
                    attrs: {
                        role: 'listbox',
                    },
                }, $personas),
            ]),
        ]);
    },
});
//# sourceMappingURL=Facepile.base.js.map