@extends('app')

@section('content')
<div id="app" class="container">
    <h2>Rocket.Chat Integration</h2>
    <div class="row">
        <div class="col-md-4">
            <h4>Users</h4>
            <ul class="list-group">
                <li class="list-group-item" v-for="user in users" :key="user._id" @click="selectUser(user)">
                    @{{ user.username }}
                </li>
            </ul>
        </div>
        <div class="col-md-8">
            <h4>Chat</h4>
            <div class="chat-window">
                <ul class="list-group">
                    <li class="list-group-item" v-for="msg in messages" :key="msg._id">
                        <strong>@{{ msg.u.username }}:</strong> @{{ msg.msg }}
                    </li>
                </ul>
            </div>
            <div class="input-group">
                <input type="text" class="form-control" v-model="newMessage" @keyup.enter="sendMessage">
                <div class="input-group-append">
                    <button class="btn btn-primary" @click="sendMessage">Send</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            users: [],
            messages: [],
            selectedUser: null,
            newMessage: '',
            roomId: null
        },
        created() {
            this.listUsers();
        },
        methods: {
            listUsers() {
                axios.get('/rocketchat/list-users')
                    .then(response => {
                        this.users = response.data.users;
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            selectUser(user) {
                this.selectedUser = user;
                this.createOrGetDirectMessageRoom(user.username);
            },
            createOrGetDirectMessageRoom(username) {
                axios.post('/rocketchat/create-dm', { username: username })
                    .then(response => {
                        this.roomId = response.data.room.rid;
                        this.getMessages();
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            getMessages() {
                if (!this.roomId) return;
                axios.get(`/rocketchat/get-messages/${this.roomId}`)
                    .then(response => {
                        this.messages = response.data.messages;
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            sendMessage() {
                if (!this.newMessage || !this.roomId) return;
                axios.post('/rocketchat/send-message', {
                    room_id: this.roomId,
                    message: this.newMessage
                }).then(response => {
                    this.messages.push(response.data.message);
                    this.newMessage = '';
                }).catch(error => {
                    console.error(error);
                });
            }
        }
    });
</script>
@endsection