<style>
    [v-cloak] {
        opacity: 0;
    }
    #queueComponent .patient-avatar {
        width: 50px;
        height: 50px;
        background: #ddd;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
    }
    #queueComponent .large {
        font-size: 16px !important;
    }
    #queueComponent .queue-item {
        width: 100px;
        padding: 0.5rem;
        padding-bottom: 0.25rem;
        text-align: center;
        cursor: pointer;
    }
    .patient-queue {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        width: 100%;
        bottom: 0;
        z-index: 4;
    }
    .patient-queue .btn.btn-primary:not(:disabled),
    .patient-queue .btn.btn-primary:not(:disabled):active {
        color: #fff;
        background-color: #0062cc;
        border-color: #005cbf;
        font-family: Verdana, sans-serif;
        font-size: 12px;
    }
    body.has-mcp-queue {
        padding-bottom: 150px;
    }
    body.has-mcp-queue #call-actions {
        bottom: 150px;
    }
</style>
<div class="border-top patient-queue mcp-theme-1" id="queueComponent" v-cloak>
    <div class="bg-secondary text-white font-weight-bold text-center py-1 small " v-if="items.length > 0">
        @{{ items.length }} patient@{{ items.length > 1 ? 's' : '' }} in the queue
    </div>
    <div class="bg-secondary text-white font-weight-bold text-center py-1 small " v-if="items.length === 0">
        No patients in the queue
    </div>
    <div v-if="items && items.length" class="d-flex align-items-center my-1">
        <div v-for="item in items">
            <div class="queue-item border border-primary rounded mx-1" :title="item.name">
                <div class="patient-avatar mb-1 text-dark small font-weight-bold">@{{ item.initials }}</div>
                <div class="font-weight-bold small text-nowrap text-ellipsis text-secondary">@{{ item.name }}</div>
            </div>
            <button class="btn btn-sm btn-primary mt-1 text-white font-weight-bold py-0 mx-auto d-block"
                    v-on:click.prevent="claim(item.clientUid)">Open</button>
        </div>
    </div>
</div>
<script>
    (function() {
        window.queueComponent = new Vue({
            el: '#queueComponent',
            data: {
                items: [],
                socketClient: null,
            },
            methods: {
                refresh: function() {
                    console.log("Refreshing");
                    let self = this;
                    $.get('/patients-in-queue', function(_data) {
                        self.items = _data;
                    }, 'json');
                },
                claim: function(_uid) {
                    $.post('/api/mcpRequest/claim', {clientUid: _uid}, function(_data) {
                        if(_data && _data.success) {
                            // open patient in LHS
                            window.top.openInLHS('/patients/view/' + _uid);
                            // open patient video in RHS
                            window.top.openInRHS('/pro/meet/' + _uid);
                        }
                        else {
                            if (_data.message) {
                                window.top.toastr.error(_data.message);
                            } else {
                                window.top.toastr.error('Unable to claim the patient');
                            }
                        }
                    }, 'json');
                }
            },
            mounted:function(){
                let self = this;
                self.refresh();
                window.setInterval(function(){
                    self.refresh();
                }, 5000)
                let socket = new SockJS("{{ config('app.backend_ws_url') }}");
                self.socketClient = Stomp.over(socket);
                self.socketClient.connect({}, (frame) => {

                    self.socketClient.send("/app/register", {},     // register self
                        JSON.stringify({
                            sessionKey: '{{$performer->session_key}}'
                        })
                    );

                    self.socketClient.subscribe("/user/topic/newMcpRequest", function(message) {
                        console.log("Received new mcp request: ", message);
                        self.refresh();
                    }); 

                    self.socketClient.subscribe("/user/topic/removeMcpRequest", function(message) {
                        console.log("An mcp request has been removed: ", message);
                        self.refresh();
                    });
                    
                });
            }
        });
    })();
</script>
