<template>
    <div id="app">
        <v-app id="inspire">
            <div>
                <v-toolbar flat color="white">
                    <v-toolbar-title>Zajęcia indywidualne</v-toolbar-title>
                    <v-divider
                            class="mx-2"
                            inset
                            vertical
                    ></v-divider>
                    <v-spacer></v-spacer>
                    <v-dialog v-model="dialog" max-width="500px">
                        <template v-slot:activator="{ on }">
                            <v-text-field
                                    v-model="search"
                                    append-icon="search"
                                    label="Search"
                                    single-line
                                    hide-details
                            ></v-text-field>
                            <v-btn color="orange" dark class="mb-2" v-on="on">Dodaj zajęcia indywidualne</v-btn>
                        </template>
                        <v-card>
                            <v-card-title>
                                <span class="headline">{{ formTitle }}</span>
                            </v-card-title>

                            <v-card-text>
                                <v-container grid-list-md>
                                    <v-layout wrap>
                                        <v-flex xs12 sm6 md4>
                                            <v-text-field v-model="editedItem.name" label="Nazwa"></v-text-field>
                                        </v-flex>
                                        <v-flex  xs12 sm6 md4>
                                            <v-text-field v-model="editedItem.description" label="Opis"></v-text-field>
                                        </v-flex>
                                        <v-flex  xs12 sm6 md4>
                                            <v-text-field v-model="editedItem.price" label="Cena"></v-text-field>
                                        </v-flex>
                                        <v-flex xs12 sm6 md4>
                                            <v-dialog
                                                    ref="modal2"
                                                    v-model="dateDialog"
                                                    persistent
                                                    lazy
                                                    full-width
                                                    width="290px"
                                            >
                                                <template v-slot:activator="{ on }">
                                                    <v-text-field
                                                            v-model="editedItem.date"
                                                            label="Data"
                                                            prepend-icon="event"
                                                            readonly
                                                            v-on="on"
                                                    ></v-text-field>
                                                </template>
                                                <v-date-picker color="orange"  locale="pl-pl" v-model="editedItem.date">
                                                    <v-spacer></v-spacer>
                                                    <v-btn flat color="orange" @click="dateDialog = false">Anuluj</v-btn>
                                                    <v-btn flat color="orange" @click="$refs.modal2.save(editedItem.date)">Zapisz</v-btn>
                                                </v-date-picker>
                                            </v-dialog>
                                        </v-flex>
                                        <v-flex xs12 sm6 md4>
                                            <v-dialog
                                                    ref="dialog"

                                                    v-model="timeDialog"
                                                    persistent
                                                    lazy
                                                    full-width
                                                    width="290px"
                                            >
                                                <template v-slot:activator="{ on }">
                                                    <v-text-field
                                                            v-model="editedItem.startingTime"
                                                            label="Godzina rozpoczecia"
                                                            prepend-icon="event"
                                                            readonly
                                                            v-on="on"
                                                    ></v-text-field>
                                                </template>
                                                <v-time-picker color="orange" v-model="editedItem.startingTime" >
                                                    <v-spacer></v-spacer>
                                                    <v-btn flat color="orange" @click="timeDialog = !timeDialog">Cancel</v-btn>
                                                    <v-btn flat color="orange" @click="$refs.dialog.save(editedItem.startingTime)">OK</v-btn>
                                                </v-time-picker>
                                            </v-dialog>
                                        </v-flex>
                                        <v-flex  xs12 sm6 md4>
                                            <v-text-field v-model="editedItem.durationInMinutes" label="Czas trwania"></v-text-field>
                                        </v-flex>

                                        <v-flex xs12 sm6 md4>
                                            <v-select v-model="editedItem.intensity"
                                                      :items="selectintensity"
                                                      label="Intensywnosc"
                                                      :placeholder="editedItem.intensity"
                                            ></v-select>
                                        </v-flex>
                                        <v-flex xs12 sm6 md4>
                                            <v-select v-model="editedItem.trainerId"
                                                      :items="selectTrainer"
                                                      label="Trener"
                                                      :placeholder="trainerIdToFullname(editedItem.trainerId)"
                                            ></v-select>
                                        </v-flex>
                                        <v-flex xs12 sm6 md4>
                                            <v-select v-model="editedItem.clientId"
                                                      :items="selectClient"
                                                      label="Klient"
                                                      :placeholder="clientIdToFullname(editedItem.clientId)"
                                            ></v-select>
                                        </v-flex>
                                    </v-layout>
                                </v-container>
                            </v-card-text>

                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn color="orange" flat @click="close">Cancel</v-btn>
                                <v-btn color="orange" flat @click="save">Save</v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-dialog>
                </v-toolbar>
                <v-data-table
                        :headers="headers"
                        :search="search"
                        :items="individualTrainings"
                        class="elevation-1"
                >
                    <template v-slot:items="props" >
                        <td @click="editItem(props.item)" class="text-xs-left">{{ props.item.name }}</td>
                        <td @click="editItem(props.item)"class="text-xs-left">{{ props.item.description }}</td>
                        <td @click="editItem(props.item)"class="text-xs-left">{{ props.item.price }}</td>
                        <td @click="editItem(props.item)"class="text-xs-left">{{ toDate(props.item.date) }}</td>
                        <td @click="editItem(props.item)"class="text-xs-left">{{ props.item.startingTime[0]+':'+props.item.startingTime[1]  }}</td>
                        <td @click="editItem(props.item)"class="text-xs-left">{{ props.item.durationInMinutes }}</td>
                        <td @click="editItem(props.item)"class="text-xs-left">{{ props.item.intensity }}</td>
                        <td @click="editItem(props.item)"class="text-xs-left">{{ trainerIdToFullname(props.item.trainerId) }}</td>
                        <td @click="editItem(props.item)"class="text-xs-left">{{ clientIdToFullname(props.item.client.id) }}</td>
                        <td class="justify-center layout px-0">
                            <v-icon
                                    small
                                    @click="deleteItem(props.item)"
                            >
                                delete
                            </v-icon>
                        </td>
                    </template>
                    <template v-slot:no-data>
                        <v-btn color="orange" @click="initialize">Reset</v-btn>
                    </template>
                </v-data-table>
            </div>
        </v-app>
        <v-snackbar
                v-model="notification"
                top
                :color="type"
                :timeout="timeout"
        >
            {{ snackbarText }}
        </v-snackbar>
    </div>
</template>

<script>
    import axios from 'axios'
    import {mapMutations, mapState} from 'vuex'
    import {BASE_URL} from "../../constants";


    export default {
        data: () => ({
            dialog: false,
            dateDialog: false,
            timeDialog: false,
            authCookie: '',
            search: '',
            selectTrainer:[],
            selectClient:[],
            checkbox: false,
            date: new Date().toISOString().substr(0, 10),
            modal: false,
            modal2: false,
            buttonColor: "WHITE",
            snackbarText: "Wystąpił błąd.",
            buttonText: "OK",
            hasButton: true,
            notification: false,
            timeout: 4000,
            type: null,
            selectboolean: ['true','false'],
            selectgender: ['MAN','WOMAN'],
            selectintensity: [ '1','2','3','4','5'],
            headers: [
                { text: 'Nazwa', value: 'name' },
                { text: 'Opis', value: 'description' },
                { text: 'Cena', value: 'price' },
                { text: 'Data', value: 'date' },
                { text: 'Godzina rozpoczęcia', value: 'startingTime' },
                { text: 'Czas trwania', value: 'durationInMinutes' },
                { text: 'Intensywność', value: 'intensity' },
                { text: 'Trener', value: 'trainerId' },
                { text: 'Klient', value: 'client' },
                { text: 'Akcje', value: 'actions' }
            ],
            individualTrainings: [],
            trainers:[
                { id:''},
                { name: '' },
                { surname: ''}
            ],
            clients:[
                {id:''},
                { name: ''},
                { surname: ''}
            ],
            editedIndex: -1,
            editedItem: {
                id: '',
                name: '',
                description: '',
                price: '',
                date: '',
                startingTime: '',
                durationInMinutes: '',
                intensity: '',
                createdBy: '',
                creationDate: '',
                removed: '',
                trainerId: '',
                clientId: ''
            },
            defaultItem: {
                id: '',
                name: '',
                description: '',
                price: '',
                date: '',
                startingTime: '',
                durationInMinutes: '',
                intensity: '',
                createdBy: '',
                creationDate: '',
                removed: '',
                trainerId: '',
                clientId: ''
            },

            test: '',

            dict: {
                "MAN": {
                    pl: "Mężczyzna"
                }
            }

        }),

        computed: {
            ...mapState(['token']),
            formTitle () {
                return this.editedIndex === -1 ? 'Dodaj grupowy trening' : 'Edytuj grupowy trening'

            },
            actionType()
            {
                return this.editedIndex !== -1
            }
        },

        watch: {
            dialog (val) {
                val || this.close()
            }
        },

        created () {
            var cookies = document.cookie
            var tempCookies =  cookies.split(';')
            for(var x=0; x< tempCookies.length; x++)
            {
                var cookie = tempCookies[x].split('=')
                console.log(cookie[0].trim(' '))
                if(cookie[0].trim(' ') === 'access_token_worker'){
                    this.authCookie = cookie[1];

                }}
            console.log(this.authCookie)
            if(this.authCookie==='')
                window.location.href = ''
            else
                this.initialize()
        },

        methods: {
            async initialize() {


                axios.get(BASE_URL + '/api/trainings/individual', {headers: {Authorization: this.authCookie}}).then(Response => {
                    var data = Object.values(Response.data)
                    this.individualTrainings = data;
                    console.log(this.individualTrainings)
                });

                await axios.get(BASE_URL + '/api/trainers/all', {headers: {Authorization: this.authCookie}}).then(Response => {
                    var data = Object.values(Response.data)
                    this.trainers = data;

                });

                await axios.get(BASE_URL + '/api/clients', {headers: {Authorization: this.authCookie}}).then(Response => {
                    var data = Object.values(Response.data)
                    this.clients = data;

                });


                this.setTrainersForPick();
                this.setClientsForPick();
                console.log(this.clients)
            },

            editItem(item) {
                this.editedIndex = this.individualTrainings.indexOf(item)
                this.editedItem = Object.assign({}, item)
                this.editedItem.date = this.toDate(this.editedItem.date)
                this.dialog = true
            },

            deleteItem(item) {
                const index = this.individualTrainings.indexOf(item)
                if(confirm('Czy na pewno chcesz usunąć?') && this.individualTrainings.splice(index, 1)) {
                    axios.delete(BASE_URL + '/api/trainings/individual/remove/' + item.id, {headers: {Authorization: this.authCookie}}).then(Response => {
                        var data = Object.values(Response.data)
                    }).catch(error => {
                        this.notification=true;
                        this.snackbarText='Wystąpił błąd podczas usuwania zajęć'
                        this.type='red'
                    });
                }
            },

            close() {
                this.dialog = false
                setTimeout(() => {
                    this.editedItem = Object.assign({}, this.defaultItem)
                    this.editedIndex = -1
                }, 300)
            },

            async save() {
                if (this.editedIndex > -1) {
                    Object.assign(this.individualTrainings[this.editedIndex], this.editedItem)
                    this.editedItem.trainerId = this.getTrainerIdByFullname(this.editedItem.trainerId)
                    this.editedItem.clientId = this.getClientIdByFullname(this.editedItem.clientId)
                    axios.patch(BASE_URL + '/api/trainings/individual', this.editedItem, {headers: {Authorization: this.authCookie}}).then(Response => {
                        var data = Object.values(Response.data)
                    }).catch(error => {
                        this.notification=true;
                        this.snackbarText='Wystąpił błąd podczas aktualizacji zajęć.'
                        this.type='red'
                    });
                } else {

                    this.editedItem.trainerId = this.getTrainerIdByFullname(this.editedItem.trainerId)
                    this.editedItem.clientId = this.getClientIdByFullname(this.editedItem.clientId)
                        axios.post(BASE_URL + '/api/trainings/individual', this.editedItem, {headers: {Authorization: this.authCookie}}).then(Response => {
                            var data = Object.values(Response.data)
                            this.initialize()

                        }).catch(error => {
                            this.notification=true;
                            this.snackbarText='Wystąpił błąd podczas tworzenia zajęć.'
                            this.type='red'
                        });

                    }
                this.close()
            },

            toDate(timeStamp) {
                var currentDate = new Date(timeStamp.toString());
                console.log(currentDate)
                var date = currentDate.getDate();
                var month = currentDate.getMonth(); //Be careful! January is 0 not 1
                var year = currentDate.getFullYear();

                var dateString = year + "-" + (month + 1) + "-" + date;
                return dateString;
            },

            toTimeStamp(stringDate) {
                var date = new Date(stringDate)
                return date.getTime() / 1000

            },

            trainerIdToFullname(id) {
                for (var i = 0; i < this.trainers.length; i++) {
                    if (id === this.trainers[i].id) {
                        return this.trainers[i].name + ' ' + this.trainers[i].surname
                    }

                }
            },

            clientIdToFullname(id) {
                for (var i = 0; i < this.clients.length; i++) {
                    if (id === this.clients[i].id) {
                        return this.clients[i].name + ' ' + this.clients[i].surname
                    }

                }
            },

            getClientIdByFullname(fullname) {
                for (var i = 0; i < this.clients.length; i++) {
                    if (fullname === this.clients[i].name + ' ' + this.clients[i].surname) {
                        return this.clients[i].id
                    }
                }
            },

            setClientsForPick() {
                for (var i = 0; i < this.clients.length; i++) {
                    this.selectClient.push(this.clients[i].name + ' ' + this.clients[i].surname)
                    console.log(this.selectClient)
                }
            },

            setTrainersForPick() {
                for (var i = 0; i < this.trainers.length; i++) {
                    this.selectTrainer.push(this.trainers[i].name + ' ' + this.trainers[i].surname)
                }
            },

            getTrainerIdByFullname(fullname) {
                for (var i = 0; i < this.trainers.length; i++) {
                    if (fullname === this.trainers[i].name + ' ' + this.trainers[i].surname) {
                        return this.trainers[i].id
                    }
                }

            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>