<template>
    <div class="ms-5">
        <div class="col-7">
            <div class="row">
                <input type="text" v-bind:id="'searchString'" class="col-4"/>
                <button type="button" v-on:click="getSearchResult()" class="button col-2 secondary outline">Поиск</button>
                <button type="button" v-on:click="searchMode = -1;" class="button col-2 secondary outline">Отмена</button>
            </div>
        </div>

        <div v-if="!(searchMode == -1)">
            <div v-if="!(searchResults.length == 0)" class="row">
                <div class="col-5">
                    <div class="row mb-5 card" v-for="result in searchResults">
                        <div class="col">
                            
                            <div v-if="result['title'] == null">
                                <div class="row is-left mt-2">
                                    <span class="h3">Комментарий</span>
                                    <!-- <p class="text-primary h2">Пользователь: {{ result['customerName'] }}</p> -->
                                    <span class="h3">Контент: {{ result['content'] }}</span>
                                </div>
                            </div>
                            <div v-else>
                                <div class="row is-left mt-2">
                                    <span class="h3">Пост</span>
                                    <!-- <p class="text-primary h2">Пользователь: {{ result['customerName'] }}</p> -->
                                    <span class="h3">Оглавление: {{ result['title'] }}</span>
                                    <span class="h3">Контент: {{ result['content'] }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="searchMode == -1">
            <p class='h3 m-3'>Посты</p>

            <div class="row" v-if="currentCustomerId != -1">
                <div class="col-7">
                    <div class="row is-left">
                        <p class="col-2 is-left mb-2">Заголовок:</p>
                        <input type="text" class="col-5" v-model="titleModal"/>
                    </div>
                    <div class="row is-left">
                        <p class="col-2 is-left mb-2">Текст:</p>
                        <textarea type="textarea" class="col-5" v-model="postContentModal"/>
                    </div>
                    <div class="row is-left">
                        <button type='button' class="button btn-primary col-7" v-on:click='createPost'>
                            Опубликовать
                        </button>
                    </div>
                </div>
            </div>

            <div v-if="!(posts.length == 0)" class="row">
                <div class="col-5">
                    <div class="row mb-5 card" v-for="post in posts">
                        <div class="col">
                            <div class="row is-left my-3">
                                <p class="h2"><router-link v-bind:to="'/customers/' + post['customerId']" class="text-primary">{{ post['customerName'] }}</router-link></p>
                            </div>

                            <div class="row text-left">
                                <span class="h2">{{ post['title'] }}</span>
                                <span class="h3">{{ post['content'] }}</span>
                            </div>

                            <div class="row">
                                <div v-if="!(post['comments'].length == 0)">
                                    <p class="row h3 is-left my-3">Комментарии:</p>

                                    <div class="row text-left mb-4 card" v-for="comment in post['comments']">
                                        <div class="row is-left">
                                            <span class="h2"><router-link v-bind:to="'/customers/' + post['customerId']" class="text-primary">{{ post['customerName'] }}</router-link></span>
                                            <span class="h3">{{ comment['content'] }}</span>
                                        </div>

                                        <div v-if="selectedCustomerContainsComment(comment) == true" class="row mt-3">
                                            <button v-on:click="selectedCommentId = comment['id']; selectedPostTitle = post['title']" class="button primary outline col" data-bs-toggle="modal" data-bs-target="#commentEdit">Изменить</button>
                                            <button v-on:click="deleteComment(comment['id'])" class="button error col">Удалить</button>
                                        </div>
                                    </div>
                                </div>

                                <div class="row" v-if="currentCustomerId != -1">
                                    <input type="text" v-bind:id="'post-comment-' + post['id']" class="col-7"/>
                                    <button type="button" v-on:click="selectedPostId = post['id']; selectedPostTitle = post['title']; createComment()" class="button col-5 secondary outline">Комментировать</button>
                                </div>
                            </div>

                            <div class="row" v-if="post['customerId'] == currentCustomerId">
                                <button type="button" v-on:click="deletePost(post['id'])" class="col button dark outline">Удалить пост</button>
                                <button type="button" v-on:click="selectedPostId = post['id']" class="col button primary outline" data-bs-toggle="modal" data-bs-target="#postEdit">Изменить пост</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="postEdit" tabindex="-1" role="dialog" aria-labelledby="postEditLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="postEditLabel">Редактировать пост</h5>
                </div>
                <div class="modal-body text-center">
                    <p>{{ currentCustomer['username'] }}</p>
                    <p>Заголовок</p>
                    <textarea v-model='titleModal' id="editModalTitle" cols="30" rows="1"></textarea>
                    <p>Содержание</p>
                    <textarea v-model='postContentModal' id="editModalPostContent" cols="30" rows="1"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                    <button type="button" class="btn btn-primary" v-on:click='editPost'>Изменить</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="commentEdit" tabindex="-1" role="dialog" aria-labelledby="commentEditLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="commentEditLabel">Изменить комментарий</h5>
                </div>
                <div class="modal-body text-center">
                    <p>Под именем:</p>
                    <p>{{ currentCustomer['username'] }}</p>
                    <p>К посту:</p>
                    <p>{{ selectedPostTitle }}</p>
                    <p>Комментарий</p>
                    <textarea v-model='contentModal' id="editModalText" cols="30" rows="1"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                    <button type="button" class="btn btn-primary" v-on:click='editComment'>Изменить</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            searchResults: [],
            customers: [],
            selectedCustomerId: 0,
            currentCustomer: {},
            posts: [],
            selectedPostId: 0,
            selectedPostTitle: '',
            contentModal: '',
            titleModal: '',
            postContentModal: '',
            selectedCommentId: 0,
            currentCustomerId: -1,
            searchMode: -1,
        }
    },
    methods: {
        async getSearchResult(){
            const content = document.getElementById("searchString").value
            if (content != ''){
                this.searchMode = 0; 
                this.searchResults = [];
                const responseSearch = await axios.post('http://localhost:8080/search?searchStr=' + content);
                responseSearch.data.forEach(element => {
                    this.searchResults.push(element);
                    console.log(element);
                });
            }
            else{
                this.searchMode = -1;
                this.refreshList();
            }
        },

        selectedCustomerContainsComment(comment) {
            var customer = this.customers.find(element => element['id'] == this.currentCustomerId);
            console.log(customer);
            if (customer == null) return false;
            var flag = false;
            customer['comments'].forEach(commentIn => {
                if (commentIn['id'] == comment['id']) {
                    flag = true;
                }
            });
            return flag;
        },

        async createComment() {
            const content = document.getElementById("post-comment-" + this.selectedPostId).value
            let comment = {
                "content": content,
                customerId: this.currentCustomerId,
                postId: this.selectedPostId
            };
            await axios.post('http://localhost:8080/api/comment', comment);
            document.getElementById("post-comment-" + this.selectedPostId).value = ''
            this.refreshList();
        },

        async deleteComment(commentId) {
            await axios.delete('http://localhost:8080/api/comment/' + commentId);
            this.refreshList();
        },

        async editComment(){
            let comment = {
                content: this.contentModal,
                customerId: this.currentCustomerId,
                postId: 0
            };
            await axios.put('http://localhost:8080/api/comment/' + this.selectedCommentId, comment);
            this.refreshList();
        },

        async createPost() {
            let post = {
                "content": this.postContentModal,
                title: this.titleModal,
                customerId: this.currentCustomerId
            };
            const response = await axios.post('http://localhost:8080/api/post', post);
            this.titleModal = ''
            this.postContentModal = ''
            this.refreshList();
        },

        async deletePost(postId) {
            const response = await axios.delete('http://localhost:8080/api/post/' + postId);
            this.refreshList();
        },

        async editPost(){
            let post = {
                "content": this.postContentModal,
                title: this.titleModal,
                customerId: this.currentCustomerId
            };
            const response = await axios.put('http://localhost:8080/api/post/' + this.selectedPostId, post);
            this.refreshList();
        },

        async refreshList(){
            this.customers = [];
            this.posts = [];
            const responseCustomer = await axios.get('http://localhost:8080/api/customer');
            responseCustomer.data.forEach(element => {
                this.customers.push(element);
                console.log(element);
            });
            const responsePost = await axios.get('http://localhost:8080/api/post');
            responsePost.data.forEach(element => {
                this.posts.splice(0, 0, element);
                console.log(element);
            });
        }
    },
    async beforeMount() {
        this.currentCustomerId = history.state;
        setInterval(async () => this.currentCustomerId = history.state, 50)
        const responseCustomer = await axios.get('http://localhost:8080/api/customer');
        responseCustomer.data.forEach(element => {
            this.customers.push(element);
            if (element['id'] == this.currentCustomerId) {
                this.currentCustomer = element;
            }
            console.log(element);
        });
        const responsePost = await axios.get('http://localhost:8080/api/post');
        responsePost.data.forEach(element => {
            this.posts.splice(0, 0, element);
            console.log(element);
        });
    }
}
</script>

<style lang="">
    
</style>