<template>
	<div class="comment-list">
		<template v-for="comment in rootCommentsList">
			<comment-item :key="comment.id"
						  :data-source="comment"
						  :is-parent="true" />
			<comment-item v-for="response in getResponseList(comment.id)"
						  :key="response.id"
						  :data-source="response"
						  :is-parent="false" />
		</template>
		<img src="@/assets/images/empty_list.svg"
			 alt=""
			 class="no-comment"
			 loading="lazy"
			 decoding="async"
			 width="250"
			 height="250"
			 v-show="rootCommentsList.length == 0" />
	</div>
</template>
<script>
import commentItem from "./comment_item";
import { getComments } from "../../api/api_list";

export default {
	name: "CommentsList",
	async beforeMount() {
		await this.getList();
	},
	components: {
		commentItem,
	},
	computed: {
		rootCommentsList() {
			return this.commentList.filter((comment) => comment.parent == 0);
		},
	},
	data() {
		return {
			commentList: [],
		};
	},
	methods: {
		async getList() {
			try {
				this.commentList = await getComments(this.$axios, this.$i18n.locale, this.postId);
			} catch (error) {
				this.commentList = [];
			}
		},
		getResponseList(commentId) {
			return this.commentList.filter((item) => item.parent == commentId);
		},
	},
	props: {
		postId: {
			required: true,
		},
	},
};
</script>
<style lang="scss" scoped>
.comment-list {
	border-bottom: 1px solid $color-border;
	margin-bottom: $padding-default;
	padding-bottom: $padding-default;
}

.no-comment {
	display: block;
	margin: $padding-default auto;
	max-width: 250px;
	width: 90%;
}
</style>