class PatientCSVImportWidget {

    constructor() {
        this.buttonClicked = null;
        this.csvForm = document.getElementById('form_csv');
        this.csvModal = document.getElementById('csvModalImport');

        this.uploadButton = document.getElementById('upload_button');
        this.uploadButton.disabled = true;
        this.applyButton = document.getElementById('apply_button');
        this.closeButton = this.csvForm.querySelector('.close-button');

        this.fileInput = document.getElementById('file');

        this.progressDiv = document.getElementById('progressdiv');
        this.progressBar = this.progressDiv.querySelector('.progress-bar');

        this.csvResult = document.getElementById('import-csv-result');

        this.initialize();
    }

    initialize() {
        document.addEventListener("DOMContentLoaded", () => {
            this.csvForm.addEventListener('submit', this.onSubmitForm.bind(this));
            this.fileInput.addEventListener('change', this.onFileInputChange.bind(this));
            this.csvModal.addEventListener('click', this.onClick.bind(this))
            this.csvModal.addEventListener('show.bs.modal', () => {
                this.csvResult.classList.add('d-none');
                this.progressDiv.classList.add('d-none');
                this.fileInput.textContent = '';
            })
        });
    }

    // import-csv-result
    /**
     * @param {PointerEvent} event
     */
    onClick(event) {
        let target = event.target
        let element = target.closest('[type="submit"]');

        if (element) {
            this.buttonClicked = element.id;
        }
    }

    /**
     * @param {SubmitEvent} event
     */
    onSubmitForm(event) {

        let buttonId = this.buttonClicked;

        if (buttonId === "upload_button") {
            this.startUpload(event);
        } else if (buttonId === "apply_button") {
            this.applyCSV(event);
        }
    }

    onFileInputChange(event) {
        let fileName = event.target.value.split('\\\\').pop();
        this.fileInput.innerHTML = `<span style="vertical-align: sub;">${fileName}</span>`;
        this.uploadButton.classList.add('btn-primary')
        this.uploadButton.disabled = false;
    }

    /**
     * @param {SubmitEvent} event
     */
    startUpload(event) {
        event.preventDefault();
        this.uploadButton.disabled = true;
        this.progressDiv.classList.remove("d-none");
        this.progressBar.className = 'progress-bar progress-bar-animated';
        this.progressBar.style.width = '0%';
        this.progressBar.setAttribute('aria-valuenow', '0');

        Commons.postFile(
            this.csvForm.dataset.uploadRoute,
            this.fileInput,
            (percent) => {
                if (percent >= 100) {
                    this.progressBar.style.width = '100%';
                    this.progressBar.setAttribute('aria-valuenow', 100);
                    this.progressBar.classList.add('bg-info')
                    this.progressBar.textContent = __('export.csv.modal.processing_csv');
                } else {
                    this.progressBar.style.width = percent + '%';
                    this.progressBar.setAttribute('aria-valuenow', percent);
                    this.progressBar.textContent = percent + '%';
                }
            })
            .then(response => {
                let data = response.data;
                this.progressBar.className = 'progress-bar';

                if (data.status) {
                    document.getElementById("total-records").textContent = data.nb_rows;
                    document.getElementById("imported-patient").textContent = data.rows.create;
                    document.getElementById("merged-patient").textContent = data.rows.merge;
                    document.getElementById("non-imported-patient").textContent = data.rows.not_parsed;

                    this.progressBar.textContent = __('export.csv.modal.completed');
                    this.progressBar.classList.add('bg-' + data.type);
                    this.csvResult.classList.remove('d-none');
                    this.applyButton.disabled = false;

                } else {
                    this.progressBar.textContent = __('export.csv.modal.error', {message: data.message});
                    this.progressBar.classList.add('bg-' + data.type);
                }
            })
            .catch(ex => {
                this.progressBar.textContent = __('export.csv.modal.error', {message: ex.message});
                this.progressBar.classList.add('bg-danger');
            })
            .finally(() => {
                this.closeButton.disabled = false;
                this.uploadButton.disabled = false;
                this.progressBar.classList.remove('progress-bar-animated');
            })
    }

    /**
     * @param {SubmitEvent} event
     * @return {boolean}
     */
    applyCSV(event) {
        event.preventDefault();
        this.closeButton.disabled = true;
        this.uploadButton.disabled = true;
        this.applyButton.disabled = true;
        this.progressDiv.classList.remove("d-none");

        this.progressBar.className = 'progress-bar bg-info progress-bar-animated';
        this.progressBar.style.width = '100%';
        this.progressBar.setAttribute('aria-valuenow', '100');
        this.progressBar.textContent = __('export.csv.modal.processing');
        Commons.postBody(this.csvForm.dataset.importProcess);
        this.checkProgress();
        return true;
    }


    checkProgress() {
        fetch(this.csvForm.dataset.importProgress)
            .then(response => response.json())
            .then(data => {
                if (data.finished) {
                    this.uploadButton.disabled = false;
                    this.closeButton.disabled = false;
                    if (data.error) {
                        this.progressBar.className = 'progress-bar bg-danger';
                        this.progressBar.textContent = __('export.csv.modal.error', {message: data.progress});
                    } else {
                        this.progressBar.className = 'progress-bar bg-success';
                        this.progressBar.textContent = __('export.csv.modal.processed');
                    }
                } else {
                    this.progressBar.textContent = __('export.csv.modal.processing2', {message: data.progress});
                    setTimeout(this.checkProgress.bind(this), 2000);
                }
            })
    }
}