<!-- components/RecorderModel.vue -->
<template>
    <div>
        <section class="hero is-primary">
            <div class="hero-body">
                <div class="container has-text-centered">
                    <h3>
                        <div class="text-center">
                            <font-awesome-icon class="float-left" icon="arrow-circle-left" @click="previousRecorderModel()"/>
                            <input type="number" style="font-size: small; max-width: 48px; text-align: center;"
                                   v-model="new_recorder_model_id" @blur="manually_set_recorder_model_id()"
                                   @input="manually_set_recorder_model_id()">
                            <font-awesome-icon class="float-right" icon="arrow-circle-right" @click="nextRecorderModel()"/>
                        </div>
                    </h3>

                    <div class="clearfix">
                        <!--Route params: {{$route.params.recorder_id}}-->
                        <b-img left style="margin-right: 20px;" src="https://picsum.photos/164/164/?image=58"
                               alt="Left image"></b-img>
                        <h2 class="title">
                            &nbsp;{{recorderModel.name}}
                        </h2>


                    </div>
                    <strong>{{$t('created_at')}}:&nbsp</strong>{{recorderModel.created_at}}<br/>
                    <strong>{{$t('last_time_modified')}}:&nbsp</strong>{{recorderModel.last_time_modified}}<br/>
                </div>

            </div>
        </section>
    </div>
</template>

<script>
    import {EventBus} from '@/utils';
    import getRepository from '@/api/RepositoryFactory';

    const controlRepository = getRepository('control');

    export default {
        props: ['recorder_model_id'],
        data() {
            return {
                current_recorder_model_id: this.recorder_model_id == null ? 1 : parseInt(this.recorder_model_id),
                current_recorder_model_index: null,
                new_recorder_model_id: this.current_recorder_model_id,
            };
        },
        methods: {

            manually_set_recorder_model_id() {
                if (this.new_recorder_model_id == null || this.new_recorder_model_id === '') {
                    this.new_recorder_model_id = this.current_recorder_model_id;
                    return;
                }
                if (this.recorderModelIds.includes(parseInt(this.new_recorder_model_id))) {
                    this.current_recorder_model_id = parseInt(this.new_recorder_model_id);
                }
                this.new_recorder_model_id = this.current_recorder_model_id;
            },
            calculate_current_recorder_model_index() {
                this.current_recorder_model_index = this.recorderModelIds.findIndex((id) => {
                    return id === this.current_recorder_model_id
                });
            },
            previousRecorderModel() {
                if (null == this.current_recorder_model_index) {
                    this.calculate_current_recorder_model_index();
                }
                if (this.current_recorder_model_index === 0) this.current_recorder_model_index = this.recorderModelIds.length - 1;
                else this.current_recorder_model_index = this.current_recorder_model_index - 1;
                this.current_recorder_model_id = this.recorderModelIds[this.current_recorder_model_index];
                this.new_recorder_model_id = this.current_recorder_model_id;
            },
            nextRecorderModel() {
                if (null == this.current_recorder_model_index) {
                    this.calculate_current_recorder_model_index();
                }
                if (this.current_recorder_model_index === this.recorderModelIds.length - 1) this.current_recorder_model_index = 0;
                else this.current_recorder_index = this.current_recorder_model_index + 1;
                this.current_recorder_model_id = this.recorderModelIds[this.current_recorder_model_index];
                this.new_recorder_model_id = this.current_recorder_model_id;
            },

        },
        mounted() {
            this.$store.dispatch('loadRecorderModels');
        },
        beforeDestroy() {
            EventBus.$off('failedLoadingRecorderModels');
        },
        computed: {
            recorderModelIds() {
                let ids = [];
                this.recorderModels.forEach((elem) => {
                    ids.push(parseInt(elem.id));
                });
                return ids;
            },
            recorderModel() {
                const recorderModel = this.$store.state.recorderModels.filter((item) => {
                    return parseInt(item.id) === this.current_recorder_model_id;
                });
                if (recorderModel.length < 1) {
                    this.$router.replace({name: 'notFound'});
                    return {};
                }
                return recorderModel.shift();
            },
            recorderModels() {
                return this.$store.state.recorderModels;
            },
            access_token() {
                return this.$store.state.access_token;
            },
        },
    };
</script>

<style lang="scss">
    .error-msg {
        color: red;
        font-weight: bold;
    }

    .lang-btn {
        padding: 15px;
        border: 2px solid green;
        font-size: 18px;
        margin: 15px;
    }
</style>
