<!-- components/User.vue -->
<template>
    <div>
        <section class="hero is-primary">
            <div class="hero-body">
                <div class="container has-text-centered">
                    <h3 class="title">Manage users</h3>
                    <div>{{users}}</div>
                    <h3>Users</h3>
                    <ul>
                        <li v-for="(user) in users">
                            <a href="#">({{user.id}}) {{user.first_name}}</a>
                        </li>
                    </ul>

                    <div id="userTable">
                        <table>
                            <thead>
                            <tr>
                                <th v-for="col in columns" v-on:click="sortTable(col)">{{col}}
                                    <div class="arrow" v-if="col == sortColumn"
                                         v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="row in get_rows()">
                                <td v-for="col in columns">{{row[col]}}</td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="pagination">
                            <div class="number"
                                 v-for="i in num_pages()"
                                 v-bind:class="[i === currentPage ? 'active' : '']"
                                 v-on:click="change_page(i)">{{i}}
                            </div>
                        </div>
                    </div>

                    <h3 class="title">Add User</h3>
                    <label>
                        <input v-model="user.first_name" placeholder="First name">
                    </label>
                    <p>Name is: {{ user.first_name }}</p>

                    <button v-on:click="createUser">{{$t('create_user')}}</button>

                    <p class="subtitle error-msg">{{ errorMsg }}</p>
                </div>
            </div>
        </section>

    </div>
</template>

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

    const UserRepository = getRepository('user');

    export default {
        data() {
            return {
                isLoading: false,
                user: {},
                users: [],
                errorMsg: '',
                sortColumn: '',
                currentPage: 1,
                elementsPerPage: 5,
            };
        },
        methods: {
            fetch() {
                this.isLoading = true;
                // const { data } = await GroupRepository.get();
                UserRepository.getUsers()
                    .then((response) => {
                        this.users = response.data;
                        this.isLoading = false;
                    });

            },
            get_rows() {
                const start = (this.currentPage - 1) * this.elementsPerPage;
                const end = start + this.elementsPerPage;
                return this.users.slice(start, end);
            },
            num_pages() {
                return Math.ceil(this.users.length / this.elementsPerPage);
            },
            change_page(page) {
                this.currentPage = page;
            },
            sortTable(col) {
                if (this.sortColumn === col) {
                    this.ascending = !this.ascending;
                } else {
                    this.ascending = true;
                    this.sortColumn = col;
                }

                const ascending = this.ascending;

                this.users.sort((a, b) => {
                    if (a[col] > b[col]) {
                        return ascending ? 1 : -1;
                    } else if (a[col] < b[col]) {
                        return ascending ? -1 : 1;
                    }
                    return 0;
                });
            },
            createUser() {
                UserRepository.createUser(this.user);
                this.fetch();
            },
        },
        mounted() {
            this.fetch();
        },
        beforeDestroy() {
            // todo
        },
        computed: {
            columns() {
                if (this.users.length === 0) {
                    return [];
                }
                return Object.keys(this.users[0]);
            },
        },
    };
</script>

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