const chat = {
	1: {
		text: "こんにちは！お困りですか？",
		options: [
			{
				text: "なにこれ？",
				next: 2
			}
		]
	},
	2: {
		text: "Peekobotというスクリプトを紹介する記事です。Peekobotはシンプルな選択式チャットボットフレームワークです",
		next: 3
	},
	3: {
		text:
			"ユーザーに選択してもらう形で成り立つ対話コンテンツで、目的の場所への誘導を促します",
		options: [
			{
				text: "よくわかった！",
				next: 4
			},
			{
				text: "ちょっと何言ってるか分からない",
				next: 5
			}
		]
	},
	4: {
		text:
			"頭いいですね！簡単なものなので質問も簡単なものくらいしか出来ません。詳しくはGithubをご覧ください",
		next: 7
	},
	5: {
		text: "サンドイッチマン好きですか？",
		next: 6
	},
	6: {
		text: "サンドイッチマンの動画を紹介しますね",
		options: [
			{
				text: "サンドの公式Youtubeへどうぞ！",
				url:
					"https://www.youtube.com/playlist?list=PLe8FGQbLGisnnab5M-2o88p4SAKPVb1RV"
			}
		]
	},
	7: {
		text: "ライセンスはMITとのことです",
		options: [
			{
				text: "GitHubへ",
				url: "https://github.com/peekobot/peekobot"
			}
		]
	}
};

const bot = function() {
	const peekobot = document.getElementById("peekobot");
	const container = document.getElementById("peekobot-container");

	const sleep = function(ms) {
		return new Promise(resolve => setTimeout(resolve, ms));
	};

	const scrollContainer = function() {
		container.scrollTop = container.scrollHeight;
	};

	const insertNewChatItem = function(elem) {
		container.insertBefore(elem, peekobot);
		scrollContainer();
		//debugger;
		elem.classList.add("activated");
	};

	const printResponse = async function(step) {
		const response = document.createElement("div");
		response.classList.add("chat-response");
		response.innerHTML = step.text;
		insertNewChatItem(response);

		await sleep(1500);

		if (step.options) {
			const choices = document.createElement("div");
			choices.classList.add("choices");
			step.options.forEach(function(option) {
				const button = document.createElement(option.url ? "a" : "button");
				button.classList.add("choice");
				button.innerHTML = option.text;
				if (option.url) {
					button.href = option.url;
				} else {
					button.dataset.next = option.next;
				}
				choices.appendChild(button);
			});
			insertNewChatItem(choices);
		} else if (step.next) {
			printResponse(chat[step.next]);
		}
	};

	const printChoice = function(choice) {
		const choiceElem = document.createElement("div");
		choiceElem.classList.add("chat-ask");
		choiceElem.innerHTML = choice.innerHTML;
		insertNewChatItem(choiceElem);
	};

	const disableAllChoices = function() {
		const choices = document.querySelectorAll(".choice");
		choices.forEach(function(choice) {
			choice.disabled = "disabled";
		});
		return;
	};

	const handleChoice = async function(e) {
		if (!e.target.classList.contains("choice") || "A" === e.target.tagName) {
			return;
		}

		e.preventDefault();
		const choice = e.target;

		disableAllChoices();

		printChoice(choice);
		scrollContainer();

		await sleep(1500);

		if (choice.dataset.next) {
			printResponse(chat[choice.dataset.next]);
		}
		// Need to disable buttons here to prevent multiple choices
	};

	const init = function() {
		container.addEventListener("click", handleChoice);
		printResponse(chat[1]);
	};

	init();
};

bot();