class BookingWidget {

    /**
     * @param {string} bookingExportRoute
     */
    constructor(bookingExportRoute) {
        this.bookingExportRoute = bookingExportRoute;
        this.initialize();
    }

    initialize() {
        document.addEventListener("DOMContentLoaded", () => {
            document.getElementById('add').addEventListener('click', this.onClick.bind(this));
            document.getElementById('update').addEventListener('click', this.onClick.bind(this));
        });
    }

    /**
     * @param {MouseEvent} event
     */
    onClick(event) {

        if (app.getOperationInProgress()) {
            return;
        }

        let target = event.target;
        let element;

        document.getElementById("export-to-aesthetime-results").classList.add('d-none');
        document.getElementById('add').disabled = true;
        document.getElementById('update').disabled = true;
        document.getElementById('cancel').disabled = true;

        let route = this.bookingExportRoute.replace('TYPE', target.dataset.type);

        Commons.postBody(route, '', (data) => {

            if (data.success || data.success === 0) {
                document.querySelector('span[data-id="succeeded"]').textContent = data.success;
                document.querySelector('span[data-id="skipped"]').textContent = data.skip;
                document.querySelector('span[data-id="failed"]').textContent = data.fails;
                document.getElementById("export-to-aesthetime-results").classList.remove('d-none');
            }
            document.getElementById('add').disabled = false;
            document.getElementById('update').disabled = false;
            document.getElementById('cancel').disabled = false;
        });

    }
}