class DevicesPage {

    /**
     * @param {string} deviceActivityRoute
     */
    constructor(deviceActivityRoute) {
        this.deviceActivityRoute = deviceActivityRoute;
        this.interval = null;
        this.nbCalls = 0;
        this.initialize();
    }

    initialize() {
        document.addEventListener("DOMContentLoaded", () => {
            this.updateActivity();
            this.interval = setInterval(this.updateActivity.bind(this), 10000);
            document.addEventListener('click', this.onClick.bind(this));
        });
    }

    /**
     * @param {PointerEvent} event
     */
    onClick(event) {
        let target = event.target;
        let element;

        if ((element = target.closest('.action-item'))) {
            app.needConfirmationClickOnURL(
                element.dataset.url, (result) => {
                    if (!result) {
                        return;
                    }

                    Commons.postBody(element.dataset.url);
                },
                null,
                element.dataset.confirmMsg ?? __('app.warning.are_you_sure_to_make_this_operation')
            );
        }
    }

    /**
     * @param {HTMLElement} deviceDiv
     * @param {HTMLElement} deviceContentDiv
     * @param {object} data
     */
    setDeviceUpdate(deviceDiv, deviceContentDiv, data) {

        let html = '';

        if (data.put <= 30) {
            html += document.getElementById('data-put-animation').innerHTML;
        }

        if (data.get <= 30) {
            html += document.getElementById('data-get-animation').innerHTML;
        }

        deviceDiv.querySelector(".device_activity").innerHTML = html;

        let where = deviceContentDiv.querySelector(".location_where_container");

        where.classList.add('d-none');

        if (data.pos.lat !== -1 && data.pos.lng !== -1) {
            where.classList.remove('d-none');
            deviceContentDiv.querySelector(".location_where")
                .innerHTML = document.getElementById('data-pos-map')
                .innerHTML.replaceAll('lat', data.pos.lat).replaceAll('lng', data.pos.lng);
        }

        if (data.pos.time !== -1) {

            deviceContentDiv.querySelector(".location_when").innerHTML =
                DateTime.now()
                    .minus({seconds: data.pos.time})
                    .toRelative();
        }
    }

    updateActivity() {

        fetch(this.deviceActivityRoute)
            .then(response => response.json())
            .then(devicesInfo => {
                Object.entries(devicesInfo).forEach(deviceInfo => {

                    const id = deviceInfo[0]
                    const data = deviceInfo[1];
                    let progress = Math.round(data.sync[2] * 100) / 100;
                    let total = data.sync[1];
                    let leftToSync = total - data.sync[0];

                    let deviceDiv = document.getElementById(`device_${id}`);
                    let deviceContentDiv = document.getElementById(`dev-content-${id}`);
                    let progressDiv = deviceDiv.querySelector("progress");
                    let hiddenProgressDiv = deviceContentDiv.querySelector("progress");

                    deviceDiv.querySelector(".device-name").innerHTML = data.name;

                    deviceDiv.querySelector(".progress-value").innerHTML = `${progress}%`;
                    deviceContentDiv.querySelector(".progress-value").innerHTML = `${progress}%`;

                    [progressDiv, hiddenProgressDiv].forEach(el => {
                        el.title = `${leftToSync}/${total}`;
                        el.max = total;
                        el.value = leftToSync;
                        el.classList.remove('d-none');
                    })
                    this.setDeviceUpdate(deviceDiv, deviceContentDiv, data);
                })

                if (this.nbCalls++ > 30) {
                    clearInterval(this.interval);
                }
            })
            .catch(ex => {
                clearInterval(this.interval);
            })
    }

}