class PatientPage {

    constructor() {
        this.initialize();
    }

    initialize() {
        document.addEventListener("DOMContentLoaded", () => {
            document.getElementById("thumbnail")
                .addEventListener('change', this.onThumbnailChange.bind(this));

            document.getElementById("thumbnail")
                .addEventListener('click', this.onThumbnailClick.bind(this));
        });

    }

    /**
     * @param {PointerEvent} event
     */
    onThumbnailClick(event) {
        if (event.target.tagName === 'IMG') {
            event.target.parentElement.querySelector('label').click();
        }
    }

    /**
     * @param {Event} event
     */
    onThumbnailChange(event) {
        this.readURL(event.target);
        Commons.warnChangedOnQuit();
    }

    /**
     * @param {HTMLInputElement} input
     */
    readURL(input) {
        if (!input.files || !input.files[0]) {
            return;
        }

        let file = input.files[0];
        let reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('imgThumbnail').src = e.target.result;
        }

        reader.readAsDataURL(file);
    }
}