<!-- components/Profile.vue -->
<template>
    <div>
        <section class="hero is-primary">
            <div class="hero-body">
                <div class="container has-text-centered">
                    <div class="clearfix">
                        ID: {{recorder_id}}
                        <b-img left style="margin-right: 20px;" src="https://picsum.photos/125/125/?image=58"
                               alt="Left image"></b-img>
                        <h2 class="title" v-if="recorder.name">{{recorder.name}}</h2>
                        <h2 class="title" v-else-if="recorder.name">
                            {{recorder.name}}&nbsp;{{recorder.name}}</h2>
                        <h2 class="title" v-else>{{recorder.name}}</h2>

                        <p>
                            <font-awesome-icon icon="envelope"/>&nbsp;{{recorder.name}}
                            <a class="badge badge-pill badge-info">
                            <font-awesome-icon icon="pencil-alt"/></a>
                        </p>


                    </div>

                    <hr/>

                    <p><strong>{{$t('first_name')}}:&nbsp</strong>{{recorder.name}}</p>
                    <p><strong>{{$t('last_name')}}:&nbsp</strong>{{recorder.name}}</p>


                </div>
            </div>
        </section>
        {{recorder}}
    </div>
</template>

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

    const userRepository = getRepository('user');

    export default {
        props: ['recorder_id'],
        data() {
            return {
                email: '',
                errorMsg: '',
                tokenValidity: -1,
                refreshTokenValidity: -1,
                formEditField: {},
                languages: [
                    {flag: 'us', language: 'en', title: 'English'},
                    {flag: 'es', language: 'es', title: 'Español'},
                    {flag: 'de', language: 'de', title: 'Deutsch'},
                ],
                form: {
                    first_name: '',
                    last_name: '',
                    nickname: '',
                    email: '',
                },
            };
        },
        methods: {
            authenticate() {
                this.$store.dispatch('login', {email: this.email, password: this.password})
                    .then(() => this.$router.push('/'));
            },
            updateProfile(fieldName) {
                this.$parent.$data.isLoading = true;
                this.$set(this.formEditField, fieldName, false);
                const data = {};
                data[fieldName] = this.form[fieldName];
                this.$log.debug(this.form);
                userRepository.updateProfile(data)
                    .then(() => {
                        this.$store.dispatch('loadProfile')
                            .then(() => {
                                this.$parent.$data.isLoading = false;
                            });
                    });
            },
            changeLocale(locale) {
                this.$i18n.locale = locale;
                // Vue.$moment.locale(locale);
            },
        },
        mounted() {
            console.log('recorder_id: ' + this.id);
            this.$store.dispatch('loadRecorders');
            this.$store.dispatch('loadRecorderModels');
        },
        beforeDestroy() {
            EventBus.$off('failedLoadingProfile');
        },
        computed: {
            recorder() {
                return this.$store.state.recorders;
            },
            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>
