import { BaseElement } from '../../../shared/_base';
import './session-list.less';
import * as sessionApi from '../../../shared/session-api';
import { isSessionPage } from '../../../shared/page';

export class SessionList extends BaseElement {
    onInit(): void {

        if (isSessionPage()) {
            var loadingSpinner = document.createElement("loading-spinner");
            this.appendChild(loadingSpinner);

            this.setUpdate();

            setInterval(() => {
            this.setUpdate();
            }, 5000);
        }
    }

    setUpdate() {

        sessionApi.getSessions((sessions) => {
            var loadingSpinner = this.getElementsByTagName("loading-spinner")[0];

            if (loadingSpinner) {
                this.removeChild(loadingSpinner);
            }

            for (let session of sessions) {
                var exists = document.querySelector("session-list-item[sessionId='" + session.id + "']");

                if (!exists) {
                    var ele = document.createElement("session-list-item");
                    ele.setAttribute("sessionId", session.id);
                    ele.setAttribute("numberOfChanges", session.numberOfChanges);
                    ele.setAttribute("timestamp", session.timestamp);

                    this.appendChild(ele);
                }
                else {
                    exists.setAttribute("numberOfChanges", session.numberOfChanges);
                    exists.getElementsByClassName("session-list-item-number-of-changes")[0].innerHTML = session.numberOfChanges;
                }
            }
        });
    }
}