<template>
    <b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
            :header="recorder.name"
            v-bind:key="recorder.id">
        <b-card-text>
            <h5 class="card-title">
                <strong>{{ $t('State') }}:</strong>&nbsp;<span v-if="recState.state_ok" style="color: green;">OK</span>
                <span v-else-if="recState.time_stamp!==''" style="color: red;">ERROR</span><span v-else style="color: orange;">Unknown</span>&nbsp;
                <a class=" badge badge-pill badge-info" @click="forceUpdate()">
                    Update <font-awesome-icon icon="sync"/>
                </a><br/>
                <span v-if="recState.time_stamp"><strong>{{$t('time stamp')}}:</strong>&nbsp;{{recState.time_stamp}}<br/></span>
                <strong v-if="!recState.state_ok">{{$t('Problem')}}:&nbsp;{{recState.msg}}</strong>
                <span v-else><strong>{{$t('Message')}}:&nbsp;</strong>{{recState.msg}}</span>
                <hr/>
                <div v-if="recState.previous"><small>
                    <strong>{{ $t('Previous State') }}:</strong>&nbsp;<span v-if="recState.previous.state_ok">OK</span>
                    <span v-else-if="recState.previous.time_stamp!==''">ERROR</span><span v-else>Unknown</span>&nbsp;
                    <br/>
                    <span v-if="recState.previous.time_stamp"><strong>{{$t('time stamp')}}:</strong>&nbsp;{{recState.previous.time_stamp}}<br/></span>
                    <strong v-if="!recState.previous.state_ok">{{$t('Problem')}}:&nbsp;{{recState.previous.msg}}</strong>
                    <span v-else><strong>{{$t('Message')}}:&nbsp;</strong>{{recState.previous.msg}}</span>
                </small>
                </div>
                <!--<router-link :to="{ name: 'recorders'}"> ({{$t('recorders')}}&nbsp
                    <font-awesome-icon icon="external-link-alt"/>
                    )
                </router-link>-->
            </h5>
            <p v-if="recorder.offline">{{$t('recorder is in offline mode')}}!</p>

            <b-button :to="{name: 'recorder', params: {recorder_id: recorder.id}}" variant="primary">Go to recorder</b-button>
        </b-card-text>
        <div slot="footer">
            <small class="text-muted">
                <p>{{ $t('created')}}: {{recorder.created_at | moment("dddd, MMMM Do YYYY")}}<br/>
                    {{ $t('last_time_modified')}}: {{recorder.last_time_modified | moment("dddd, MMMM Do YYYY")}}<br/>
                </p>
            </small>
        </div>
    </b-card>
</template>

<script>
    export default {
        props: ['recorder'],
        data() {
            return {
                connectedWebsocket: false,
                recState: {
                    state_ok: false,
                    msg: 'unknown (please wait for server update, might take a few minutes)',
                    time_stamp: '',
                    previous: false,
                },
            };
        },

        mounted() {
            this.$socket.client.on('connect', (msg) => {
                this.$socket.client.emit('request_recorder_state_updates', this.recorder.id);
                this.$socket.client.emit('', "unnamed msg!?!");
                console.log('recorder_state_update_' + this.recorder.id);
                this.$socket.client.on('recorder_state_update_' + this.recorder.id, (payload) => {
                    this.handleReply(payload);
                });
            });
            if (!this.$socket.connected) {
                this.connectWebsocket();
                this.connectedWebsocket = true;
            } else {
                this.$socket.client.emit('request_recorder_state_updates', this.recorder.id);
                this.$socket.client.emit('', "unnamed msg!?!");
                console.log('recorder_state_update_' + this.recorder.id);
                this.$socket.client.on('recorder_state_update_' + this.recorder.id, (payload) => {
                    this.handleReply(payload);
                });
            }
            this.forceUpdate();
        },

        beforeDestroy() {
            if (this.connectedWebsocket) {
                this.disconnectWebsocket();
            }
        },

        methods: {
            forceUpdate() {
                if (this.$socket.connected){
                    this.$socket.client.emit('force_recorder_state_update', this.recorder.id);
                    this.$socket.client.emit('', "unnamed msg!?!");
                    this.$socket.client.on('recorder_state_update_' + this.recorder.id, (payload) => {
                        this.handleReply(payload);
                    });
                }
            },
            connectWebsocket() {
                this.$socket.client.connect();
            },

            handleReply(state_reply) {
                this.recState = JSON.parse(state_reply);
            },

            disconnectWebsocket() {
                if (this.$socket.connected) {
                    this.$socket.client.disconnect();
                }
            },
        },
    };
</script>

<style scoped>

</style>
