// js/CalendarModalView.js

class CalendarModalView {
    constructor(data) {
        this.modal = '';
        if (data.mode !== 'show' && data.mode !== 'new' && data.mode !== 'edit') {
            throw new Error("unknown mode in CalendarModal's constructor");
        }
        this.data = data;
    }
    getView() {
        switch (this.data.mode) {
            case 'show':
                this.makeShowView();
                break;
            case 'new':
            case 'edit':
                this.makeEditView();
                break;
            default:
                throw new Error("unknown mode set in CalendarModal");
        }
        return this.modal;
    }
    makeShowView() {
        if (this.data.mode !== 'show') {
            throw new Error('');
        }
        if (this.data.all_day) {
            this.data.end.setDate(this.data.end.getDate() - 1); // jour de fin modifié pour ne pas faire bizarre pour l'utilisateur
        }
        this.modal += `<div id="event" style="border-color: ` + this.escapeHtml(this.data.color) + `;">
            <h3>` + this.escapeHtml(this.data.title) + `</h3>
            <p><i>` + this.escapeHtml(this.data.description) + `</i></p>`;
        // allDay un jour
        if (this.data.all_day && (this.data.start.getTime() === this.data.end.getTime())) { // comparaison des timestamps
            this.modal += `<p>le ` + this.escapeHtml(this.displayDate(this.data.start)) + `</p>`; // affichage simplifié évènement d'un jour
        }
        // allDay plusieurs jours
        else if (this.data.all_day) {
            this.modal += `<p>du ` + this.escapeHtml(this.displayDate(this.data.start)) + `<br>
	    	au ` + this.escapeHtml(this.displayDate(this.data.end)) + `</p>`;
        }
        // non allDay
        else {
            this.modal += `<p>du ` + this.escapeHtml(this.displayDate(this.data.start)) + `<br>
	        à ` + this.escapeHtml(this.displayHour(this.data.start)) + `</p>
            <p>au ` + this.escapeHtml(this.displayDate(this.data.end)) + `<br>
	        à ` + this.escapeHtml(this.displayHour(this.data.end)) + `</p>`;
        }
        this.modal += `<button class="event_close_button">Fermer</button>
        </div>`;
    }
    displayDate(date) {
        return date.getDate().toString().padStart(2, '0') + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getFullYear();
    }
    displayHour(date) {
        return date.getHours().toString().padStart(2, '0') + 'h' + date.getMinutes().toString().padStart(2, '0');
    }
    makeEditView() {
        if (this.data.mode === 'show') {
            throw new Error('');
        }
        if (this.data.all_day) {
            this.data.end.setDate(this.data.end.getDate() - 1); // jour de fin modifié pour ne pas faire bizarre pour l'utilisateur
        }
        const title = this.data.mode === 'edit' ? this.data.title : '';
        const id = this.data.mode === 'edit' ? this.data.id : '';
        const description = this.data.mode === 'edit' ? this.data.description : '';
        const color = this.data.mode === 'edit' ? this.data.color : '#3788D8'; // bleu par défaut
        this.modal += `<div id="event" style="border-color: ` + this.escapeHtml(color) + `;">
				<div class="event_title_box">
		            <h2>` + (this.data.mode === 'edit' ? "Modifier un" : "Nouvel") + ` évènement</h2>
		        </div>
		        <div class="">
		            <label for="event_title">Nom</label>
		            <input type="text" id="event_title" value="` + this.escapeHtml(title !== null && title !== void 0 ? title : '') + `">
		            <input type="hidden" id="event_id" value="` + this.escapeHtml(id !== null && id !== void 0 ? id : '') + `">
		        </div>
		        <div class="">
		            <label for="event_description">Description</label>
		            <textarea id="event_description" cols="27">` + this.escapeHtml(description !== null && description !== void 0 ? description : '') + `</textarea>
		        </div>
		        <div class="">
		            <input type="checkbox" id="event_all_day" class="event_all_day" ` + (this.data.all_day ? 'checked' : '') + `>
		            <label for="event_all_day">Journée entière</label>
		        </div>
		        <div class="">
		            <label for="event_start">Début</label>
		            <input type="` + this.escapeHtml(this.data.input_type) + `" id="event_start" value="` + this.escapeHtml(this.makeInputValue(this.data.start)) + `">
		        </div>
		        <div class="">
		            <label for="event_end">Fin</label>
		            <input type="` + this.escapeHtml(this.data.input_type) + `" id="event_end" value="` + this.escapeHtml(this.makeInputValue(this.data.end)) + `">
		        </div>
		        <div class="">
		            <label for="event_color">Couleur</label>
		            <input type="color" id="event_color" value="` + this.escapeHtml(color) + `">
		        </div>`
            + (this.data.mode === 'edit'
                ? '<button class="submit_update_event">Modifier</button><button class="delete_event">Supprimer</button>'
                : '<button class="submit_new_event">Enregistrer</button>')
            + `<button class="event_close_button">Annuler</button>
		    </div>`;
    }
    makeInputValue(date) {
        return date.getFullYear() + '-' + (date.getMonth() + 1).toString().padStart(2, '0') + '-' + date.getDate().toString().padStart(2, '0')
            + (this.data.all_day ? '' : 'T' + date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0'));
    }
    escapeHtml(html) {
        if (html === null || html === undefined)
            return '';
        return String(html)
            .replace(/&/g, "&amp;") // & en premier
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }
}