<template>
    <main>
        <section class="chat-pic1"><!-- maths comunity group creation -->
            <basic-vue-chat :new-message="message" :title="'Maths Community group'"
                @newOwnMessage="onNewOwnMessageMaths" :initial-feed="feedMaths" />
            <!-- <chat-window :current-user-id="currentUserId" :rooms="rooms" :messages="messages" /> -->
        </section>
        <section class="chat-pic"><!-- science community group creation -->
            <basic-vue-chat :new-message="message" :title="'Science Community group'"
                @newOwnMessage="onNewOwnMessageScience" :initial-feed="feedScience" />
            <!-- <chat-window :current-user-id="currentUserId" :rooms="rooms" :messages="messages" /> -->
        </section>
    </main>

</template>
<script>
    import BasicVueChat from "basic-vue-chat";
    import ApiService from '@/services/api.service';
    // import ChatWindow from 'vue-advanced-chat'
    // import 'vue-advanced-chat/dist/vue-advanced-chat.css'
    export default {
        data() {
            return {
                value: '',
                rooms: [],
                message: {
                    id: 0,
                    author: 'Person',
                    contents: 'hi there',
                    date: '16:30'
                },
                feedMaths: [],
                feedScience: [],
                currentUserId: 1,
                user:null,
            }
        },
        components: {
            BasicVueChat
        },
        created() {
            const user = JSON.parse(window.localStorage.getItem('user'));
            this.user = user;
            this.currentUserId = user.parent_id
            this.showMessagesMaths()
            this.showMessagesScience()
        },
        methods: {
            onNewOwnMessageMaths(msg) {
                const messageObj = {
                    conversation_group_id: 1, // Maths
                    sender_id: this.currentUserId,
                    receiver_id: 1000,
                    message: msg,
                    is_read: 1,
                    created_at: '2021-02-17'
                }
                ApiService.post('/chat/create', messageObj)
                    .then(response => {
                        console.log(response)
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            onNewOwnMessageScience(msg) {
                const messageObj = {
                    conversation_group_id: 2, // Science
                    sender_id: this.currentUserId,
                    receiver_id: 1000,
                    message: msg,
                    is_read: 1,
                    created_at: '2021-02-17'
                }
                ApiService.post('/chat/create', messageObj)
                    .then(response => {
                        console.log(response)
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            showMessagesMaths() {
                ApiService.get('/chat/get', 1)
                    .then(response => {
                        response.data.conversations.forEach(element => {
                            this.feedMaths.push({
                                id: element.sender_id == this.currentUserId ? 0 : 1,
                                author: element.sender_id == this.currentUserId ? "Me" : element.sender.first_name,
                                contents: element.message,
                                date: new Date(element.created_at).toISOString().substring(0, 10)
                            })
                        });
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            showMessagesScience() {
                ApiService.get('/chat/get', 2)
                    .then(response => {
                        response.data.conversations.forEach(element => {
                            this.feedScience.push({
                                id: element.sender_id == this.currentUserId ? 0 : 1,
                                author: element.sender_id == this.currentUserId ? "Me" : element.sender.first_name,
                                contents: element.message,
                                date: new Date(element.created_at).toISOString().substring(0, 10)
                            })
                        });
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        },
    }
</script>
<style lang="scss">
    .window {
        max-width: 100% !important;
    }
</style>