<template>
    <div class="media-list media-list-hover media-list-divided">
        <comenatario-item v-for="comment in comments"
                 :key="comment.id"
                 :parent_comment="comment.id"
                 :comment="comment"
                 :author="comment.author"
                 :post_id="comment.post_id"
                 :auth="auth"
                 :has_replies="comment.has_replies"
                 :cant_replies="comment.total_replies"
                 :data_confirm="data_confirm">
        </comenatario-item>
    </div>
</template>

<script>
    export default {
        props: ["post_id", "loading_comments", "data_confirm", "auth"],

        data() {
            return {
                comments: [],
                isLoading: false,
                endpoint: "/api/v1/posts/" + this.post_id + "/comments/"
            };
        },

        mounted() {
            this.retrieveComments();

            if (window.Echo) {
                Echo.channel("post." + this.post_id)
                    .listen(".comment.posted", e => {this.addComment(e.comment)});
            }

            Event.$on("added", comment => {
                this.addComment(comment);
            });
        },

        methods: {
            retrieveComments() {
                this.isLoading = true;

                axios.get(this.endpoint)
                    .then(response => {
                        this.comments.push(...response.data.data);
                        this.isLoading = false;
                        this.endpoint = response.data.links.next;
                    })
                    .catch(error => {
                        console.log(error);
                        this.isLoading = false;
                    });
            },

            addComment(comment) {
                this.comments.unshift(comment);
            }
        }
    }
</script>