/* @license 
magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0 
@license-end */

import { BaseController } from "./base_controller.js";

export class RepliesController extends BaseController {
	constructor() {
		super();
	}

	async init() {
		this.comment_id = 0;
		this.reply_form = await this.getReplyForm();
		this.listenButtons("replies-button", this.renderReplies.bind(this));
		this.listenButtons("new-reply-button", this.showReplyForm.bind(this));
	}

	async submit(event) {
		await super.submit(event, `${this.comments_server_host}/api/comments/${this.comment_id}/replies`);
	}

	listenButtons(class_name, func) {
		const buttons = document.getElementsByClassName(class_name);

		if (buttons) {
			for (let button of buttons)
				button.addEventListener("click", func);
		}
	}

	showReplyForm(event) {
		const replies_section = event.target.parentElement.parentElement.childNodes[3];
		const form = replies_section.querySelector(".reply-form");

		if (form == null) {
			replies_section.appendChild(this.reply_form);
			this.setCommentId(replies_section);
			this.reply_form.addEventListener("submit", this.submit.bind(this));
		} else
			form.remove();
	}

	renderReplies(event) {
		/* The div to contain the comment's replies. From the element id
				 we can get the comment's id. */
		const comment_replies_section = event.target.parentElement.parentElement.parentElement;
		const present_replies = comment_replies_section.querySelector(".replies-section");
		this.setCommentId(comment_replies_section);

		if (present_replies != null) {
			present_replies.remove();

			return;
		}

		this.get(`/api/comments/${this.comment_id}/replies`).then((value) => {
			const replies = value?.getElementById(`replies-section-${this.comment_id}`);

			if (replies != null)
				comment_replies_section.appendChild(replies);
		});
	}

	setCommentId(replies_section) {
		this.comment_id = /\d/.exec(replies_section.id)[0];
	}

	async getReplyForm() {
		var form = await this.get("/api/replies/new");

		return form.getElementsByClassName("reply-form")[0];
	}
}