var app = new Vue({
	el: '#app',
	data: {
		alphabet: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
		quiz: []
	},
	computed: {
		config_preview() {
			let data = [];
			for (var i in this.quiz) {
				let question = this.quiz[i];

				if (!this.verify_question_options(question)) {
					data.push(`# ERROR: Question ${parseInt(i) + 1} has an invalid option.\n#\tThe question has been excluded from the quiz,\n#\tthis can cause your questions not to line up\n#\twith the answers!`);
					continue;
				};


				// Valid options, create the actual TOML structure
				let section = `[[quiz.questions]] # question ${parseInt(i) + 1}`;
				section += `\nanswer="${question.answer.toUpperCase()}"`;
				if (question.highest_letter == "A") {
					section += `\nrange="[A]"`;
				} else {
					section += `\nrange="[A-${question.highest_letter}]"`
				};
				section += `\ncan_change=${question.changeable}`;

				data.push(section);
			}
			return data.join(`\n\n`);
		},
	},
	methods: {
		verify_question_options(question) {
			return question.answer.length === 1;
		},
		add_question() {
			this.quiz.push(JSON.parse(`{"answer": "A", "highest_letter": "A", "changeable": false}`));
		},
		delete_question(i) {
			document.getElementById(`question-${i}-options`).open = false;
			this.quiz.splice(i, 1);
			alert(`Deleted Question ${parseInt(i) + 1}`);
		},
	},
});