class PatientAutocompleteWidget {

    constructor() {
        this.selectedPatient = null;
        this.initialize();
    }

    initialize() {
        document.addEventListener('patient-autocomplete', this.onPatientAutoComplete.bind(this));
        document.addEventListener('click', this.onClick.bind(this));
        document.addEventListener('tap', this.onClick.bind(this));
        document.addEventListener('touchstart', this.onClick.bind(this));
        document.querySelectorAll('button[data-type-autocomplete-submit]').forEach(el => {

            let container = el.closest('[data-patient-autocomplete-container]');
            if (container.dataset.patientId) {
                container.selectedPatient = {
                    pid: container.dataset.patientId
                }
            }
            else {
                el.disabled = true
            }

        });
    }

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

        if (element = target.closest('input[data-patient-autocomplete]')) {
            if (element.disabled) {
                let container = target.closest('[data-patient-autocomplete-container]');
                let selectedPatientDiv = container.querySelector('[data-selected-patient-div]');
                let autocompleteDiv = container.querySelector('[data-patient-autocomplete]');
                let submitButton = container.querySelector('button[data-type-autocomplete-submit]');
                let selectedPatientInvalidPhoneExtDiv = container.querySelector('[data-div-invalid-phone-ext]')
                let phoneUse = container.dataset.phoneUse === '1';

                selectedPatientDiv.classList.add('d-none');
                autocompleteDiv.value = '';
                autocompleteDiv.disabled = false;

                if (submitButton) {
                    submitButton.disabled = true;
                }

                if (phoneUse) {
                    selectedPatientInvalidPhoneExtDiv.classList.add('d-none');
                }

                container.selectedPatient = null;
            }
        }

        if (element = target.closest('[data-type-autocomplete-submit="remoteSign"]')) {
            this.remoteSign(element);
        }
        if (element = target.closest('[data-type="sendMail"]')) {
            this.sendMail(element);
        }

    }

    /**
     * @param {CustomEvent} event
     */
    onPatientAutoComplete(event) {
        this.selectedPatient = null;

        let target = event.detail.target;
        let container = target.closest('[data-patient-autocomplete-container]');
        let submitButton = container.querySelector('button[data-type-autocomplete-submit]');
        let selectedPatientDiv = container.querySelector('[data-selected-patient-div]');
        let noEmailOrPhoneDiv = container.querySelector('[data-div-no-email-or-phone]');
        let noEmailDiv = container.querySelector('[data-div-no-email]');
        let selectedPatientInvalidPhoneExtDiv = container.querySelector('[data-div-invalid-phone-ext]')
        let phoneUse = container.dataset.phoneUse === '1';

        if (submitButton) {
            submitButton.disabled = true;
        }

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

        if (phoneUse) {
            noEmailOrPhoneDiv?.classList?.add('d-none');
            selectedPatientInvalidPhoneExtDiv?.classList?.add('d-none');
        } else {
            noEmailDiv?.classList?.add('d-none');
        }

        let patient = event.detail.patient;

        container.querySelectorAll('[data-link="edit-patient-file"]').forEach(el => {
            el.href = el.dataset.url.replace('DATA', patient.data_id).replace('PID', patient.pid)
            el.target = '_blank'
        })

        if (Commons.validateEmail(patient.email) && (!phoneUse || patient.phone)) {
            selectedPatientDiv.classList.remove('d-none');
            selectedPatientDiv.querySelector('.fullname').textContent = patient.firstname + ' ' + patient.lastname;
            selectedPatientDiv.querySelector('.email').textContent = patient.email;
            selectedPatientDiv.querySelector('.phone-number').textContent = patient.phone;
            target.disabled = true;

            if (phoneUse) {
                if (patient.prices == null) {
                    selectedPatientInvalidPhoneExtDiv.classList.remove('d-none');
                    selectedPatientDiv.querySelector('.estimated-price').textContent =
                        __('remote_signing.modal.estimated_price_unavailable.value')
                    return;
                } else {
                    let text = __('remote_signing.modal.estimated_price.value', {
                        min_price: patient.prices.min,
                        max_price: patient.prices.max,
                    })
                    selectedPatientDiv.querySelector('.estimated-price').textContent = text;
                }
            }
            container.selectedPatient = patient;
            this.activateButton(container, true);
        } else {
            if (phoneUse) {
                console.log('noEmailOrPhoneDiv')
                noEmailOrPhoneDiv.classList.remove('d-none');
            } else {
                console.log('noEmailDiv')
                noEmailDiv.classList.remove('d-none');
            }
        }

    }

    remoteSign(element) {
        let type = element.dataset.type;
        let container = element.closest('[data-patient-autocomplete-container]');

        if (container.selectedPatient === null) {
            return;
        }

        let remoteSignResult = container.querySelector('[data-remote-sign-result]');
        let id = container.querySelector('[data-element-id]').value;

        Commons.postBodyDataObject(
            element.dataset.url,
            {
                id: parseInt(id),
                pid: container.selectedPatient.pid
            },
            (data) => this.submitResult(data, remoteSignResult)
        )
    }

    sendMail(element) {
        let container = element.closest('[data-patient-autocomplete-container]');

        if (container.selectedPatient === null) {
            return;
        }

        let sendMailResult = container.querySelector('[data-send-mail-result]');
        let id = container.querySelector('[data-element-id]').value;
        let pid = container.selectedPatient.pid;
        let url = element.dataset.url;

        Commons.postBody(
            url.replace('PID', pid).replace('DATAID', id),
            '',
            (data) => this.submitResult(data, sendMailResult)
        );
    }

    submitResult(data, resultDiv) {
        let span = resultDiv.querySelector('span');
        resultDiv.classList.remove('d-none');
        span.classList.remove('text-success', 'text-danger')
        span.classList.add('text-' + data.type);
        span.textContent = data.message;

    }

    /**
     * @param {HTMLElement} container
     * @param {boolean} state
     */
    activateButton(container, state) {
        container.querySelectorAll('[data-autocomplete-button]')
            .forEach(btn => {
                btn.disabled = !state
            })

        app.setRefreshingState(!state);
    }
}