// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
import * as React from 'react';
import { Panel } from '@lumino/widgets';
import { ReactWidget } from '@jupyterlab/apputils';
import { PathExt } from '@jupyterlab/coreutils';
/**
 * The CSS class added to collaborators list container.
 */
const COLLABORATORS_LIST_CLASS = 'jp-CollaboratorsList';
/**
 * The CSS class added to each collaborator element.
 */
const COLLABORATOR_CLASS = 'jp-Collaborator';
/**
 * The CSS class added to each collaborator element.
 */
const CLICKABLE_COLLABORATOR_CLASS = 'jp-ClickableCollaborator';
/**
 * The CSS class added to each collaborator icon.
 */
const COLLABORATOR_ICON_CLASS = 'jp-CollaboratorIcon';
export class CollaboratorsPanel extends Panel {
    constructor(currentUser, awareness, fileopener) {
        super({});
        /**
         * Handle collaborator change.
         */
        this._onAwarenessChanged = () => {
            const state = this._awareness.getStates();
            const collaborators = [];
            state.forEach((value, key) => {
                if (this._currentUser.isReady &&
                    value.user.name !== this._currentUser.identity.name) {
                    collaborators.push(value);
                }
            });
            this._body.collaborators = collaborators;
        };
        this._awareness = awareness;
        this._currentUser = currentUser;
        this._body = new CollaboratorsBody(fileopener);
        this.addWidget(this._body);
        this.update();
        this._awareness.on('change', this._onAwarenessChanged);
    }
}
/**
 * The collaborators list.
 */
export class CollaboratorsBody extends ReactWidget {
    constructor(fileopener) {
        super();
        this._collaborators = [];
        this._fileopener = fileopener;
        this.addClass(COLLABORATORS_LIST_CLASS);
    }
    get collaborators() {
        return this._collaborators;
    }
    set collaborators(value) {
        this._collaborators = value;
        this.update();
    }
    render() {
        return this._collaborators.map((value, i) => {
            let canOpenCurrent = false;
            let current = '';
            let separator = '';
            let currentFileLocation = '';
            if (value.current) {
                canOpenCurrent = true;
                currentFileLocation = value.current.split(':')[1];
                current = PathExt.basename(currentFileLocation);
                current =
                    current.length > 25 ? current.slice(0, 12).concat(`…`) : current;
                separator = '•';
            }
            const onClick = () => {
                if (canOpenCurrent) {
                    this._fileopener(currentFileLocation);
                }
            };
            const displayName = `${value.user.display_name} ${separator} ${current}`;
            return (React.createElement("div", { className: canOpenCurrent
                    ? `${CLICKABLE_COLLABORATOR_CLASS} ${COLLABORATOR_CLASS}`
                    : COLLABORATOR_CLASS, key: i, onClick: onClick },
                React.createElement("div", { className: COLLABORATOR_ICON_CLASS, style: { backgroundColor: value.user.color } },
                    React.createElement("span", null, value.user.initials)),
                React.createElement("span", null, displayName)));
        });
    }
}
//# sourceMappingURL=collaboratorspanel.js.map