<!--
  - Copyright (c) 2022.
  - Author Peter Placzek (tada5hi)
  - For the full copyright and license information,
  - view the LICENSE file that was distributed with this source code.
  -->

<script>
export default {
    props: {
        socketStatus: {
            type: Object
        }
    },
    computed: {
        inTransition() {
            return this.socketStatus.busy || this.socketStatus.connecting || this.socketStatus.disconnecting
        }
    },
    methods:{
        clicked($event) {
            this.$emit('clicked', $event);
        }
    }
}
</script>

<template>
    <button type="button" class="btn btn-xs" :class="{
        'btn-info': inTransition,
        'btn-dark': !inTransition && !socketStatus.connected && !socketStatus.error,
        'btn-success': !inTransition && socketStatus.connected && !socketStatus.error,
        'btn-danger': socketStatus.error
    }"
    @click="clicked($event)">
        <span v-if="socketStatus.busy"><i class="fas fa-circle-notch fa-spin"></i> Loading</span>
        <span v-else-if="socketStatus.connecting">Connecting...</span>
        <span v-else-if="socketStatus.disconnecting">Disconnecting...</span>
        <span v-else-if="socketStatus.connected"><i class="fa fa-signal"></i> Connected</span>
        <span v-else-if="socketStatus.error"><i class="fa fa-exclamation"></i> {{ socketStatus.error ? socketStatus.error : 'Es ist ein Fehler beim Verbinden aufgetreten...' }}</span>
        <span v-else><i class="fa fa-book-dead"></i> Disconnected</span>
    </button>
</template>
