<template>
	<div class="comment__form">
		<div class="comment__title">
			{{ $t("addCommentTitle") }}
		</div>
		<input
			v-model="authorName"
			:placeholder="$t('commentAuthorName')"
			class="comment__input comment__input--name"
		/>
		<input
			v-model="email"
			:placeholder="$t('commentEmail')"
			class="comment__input"
		/>
		<textarea
			v-model="commentContent"
			:placeholder="$t('commentContent')"
			class="comment__textarea"
		></textarea>
		<action-btn
			:disabled="isSending"
			:text="$t('addComment')"
			class="comment__action"
			@click="addComment"
		/>
		<div :class="commentSummaryClass" v-html="formSummary"></div>
	</div>
</template>
<script>
import actionBtn from "@/components/shared/other/action_btn";
import { isEmailValid, isNullOrEmpty } from "../../helper/helper";
import { addComment as registerComment } from "../../api/api_list";

export default {
	name: "CommentsAddForm",
	components: {
		actionBtn,
	},
	computed: {
		commentSummaryClass() {
			return {
				comment__summary: true,
				"comment__summary--successed": this.isFormSummarySuccessful,
			};
		},
	},
	data() {
		return {
			authorName: "",
			commentContent: "",
			email: "",
			formSummary: "",
			isFormSummarySuccessful: false,
			isSending: false,
		};
	},
	methods: {
		async addComment() {
			let canContinue = this.isFormValid();
			if (!canContinue) return;

			try {
				this.isSending = true;
				const apiResult = await registerComment(
					this.$axios,
					this.authorName,
					this.email,
					this.commentContent,
					this.postId
				);

				const statusCode = apiResult.status;
				const isSuccessful = statusCode < 400;
				if (!isSuccessful) throw new Error("can't add comment");
				this.resetForm();
				this.formSummary = this.$t("commentSuccess");
				this.isFormSummarySuccessful = true;
			} catch (e) {
				this.formSummary = this.$t("commentFailed");
				this.isFormSummarySuccessful = false;
				this.isSending = false;
			}
		},
		isFormValid() {
			this.resetFormSummary();

			if (this.isSending) return false;

			const hasAuthor = !isNullOrEmpty(this.authorName);
			const emailValid = isEmailValid(this.email);
			const hasContent = !isNullOrEmpty(this.commentContent);
			const isValid = hasAuthor && emailValid && hasContent;
			if (isValid) return true;

			let message = "";

			if (!hasAuthor)
				message += `<div>${this.$t("commentAuthorError")}</div>`;
			if (!emailValid)
				message += `<div>${this.$t("commentEmailError")}</div>`;
			if (!hasContent)
				message += `<div>${this.$t("commentContentError")}</div>`;

			this.formSummary = message;
			return false;
		},
		resetForm() {
			this.resetFormSummary();
			this.authorName = "";
			this.email = "";
			this.commentContent = "";
			this.isSending = false;
		},
		resetFormSummary() {
			this.formSummary = "";
			this.isFormSummarySuccessful = false;
		},
	},
	props: {
		postId: {
			required: true,
		},
	},
};
</script>
<style lang="scss" scoped>
.comment {
	&__form {
		font-size: 0;
		line-height: 2;
	}

	&__title {
		color: $color-text;
		font-size: 13px;
		margin-bottom: $padding-default;
		text-align: justify;
	}

	&__input,
	&__textarea {
		background: $color-white--dark;
		border: 1px solid $color-border;
		border-radius: 5px;
		font-family: inherit;
		font-size: 12px;
		outline: none;
		padding: 0 5px;
	}

	&__input {
		display: block;
		height: 36px;
		line-height: 36px;
		max-width: none;
		width: 100%;

		@media (min-width: 480px) {
			display: inline-block;
			vertical-align: top;
			width: calc(50% - #{$padding-default/4});
			&--name {
				margin-left: $padding-default/2;
			}
		}
	}

	&__textarea {
		display: block;
		height: 120px;
		margin: $padding-default/2 auto;
		max-width: 100%;
		min-width: 100%;
		padding: 8px;
		width: 100%;
	}

	&__summary {
		color: $color-danger;
		font-size: 12px;
		margin: $padding-default auto 0 auto;

		&--successed {
			color: $color-success;
		}
	}

	&__action {
		width: 100%;

		@media (min-width: 768px) {
			min-width: 200px;
			width: auto;
		}
	}
}

[data-lang="en"]{
	.comment {
		&__input {
			@media (min-width: 480px){
				&--name {
					margin-left: 0;
					margin-right: $padding-default/2;
				}
			}
		}
	}
}
</style>