/* global Vue, axios */

var studentListApi = `//localhost:8080/api/students`;
var studentApi = ({id}) => `//localhost:8080/api/students/${id}`;

const app = Vue.createApp({

	data() {
		return {
			student: {},
			editing: false
		};
	},

	mounted() {

		if (sessionStorage.getItem("selectedStudent")) {
			this.student = JSON.parse(sessionStorage.getItem('selectedStudent'));
		}

		if (sessionStorage.getItem("editing")) {
			this.editing = Boolean(sessionStorage.getItem("editing"));
		}

	},

	methods: {

		save() {

			if (this.editing) {

				axios.put(studentApi({id: this.student.id}), this.student)
					.then(() => {
						window.location = 'list.html';
					})
					.catch(error => {
						console.error(error);
						alert("An error occured - check the console for details.");
					});

			} else {

				axios.post(studentListApi, this.student)
					.then(() => {
						window.location = 'list.html';
					})
					.catch(error => {
						console.error(error);
						alert("An error occured - check the console for details.");
					});
			}

		},

		edit() {
			sessionStorage.setItem('editing', true);
			window.location = 'add.html';
		},

		remove() {
			axios.delete(studentApi({id: this.student.id}))
				.then(() => {
					window.location = 'list.html';
				})
				.catch(error => {
					console.error(error);
					alert("An error occured - check the console for details.");
				});
		}
	}
});

import { PageHeader } from './pageheader.js';
app.component('pageheader', PageHeader);

app.mount('#content');