<template>
    <div style="">
        <v-container grid-list-md pa-10>
            <v-layout row wrap>
                <v-flex md12>
                    <h1>New App</h1>
                    <v-text-field
                            label="Name"
                            value=""
                            type="text"
                            v-model="name"
                            error=true
                            :error=nameErrorFlag
                            :error-messages=nameError
                    ></v-text-field>
                    <v-text-field
                            label="Description"
                            value=""
                            type="text"
                            v-model="description"
                            error=true
                            :error=descriptionErrorFlag
                            :error-messages=descriptionError
                    ></v-text-field>
                    <v-text-field
                            label="URL"
                            value=""
                            type="text"
                            v-model="url"
                            :error-messages=urlError
                            :error=urlErrorFlag
                    ></v-text-field>
                </v-flex>
            </v-layout>

            <v-btn
                    color="success"
                    @click="createApp"
            >
                Create App
            </v-btn>

        </v-container>


    </div>

</template>

<script>
    import AppService from '../services/Apps'
    export default {
        data () {
            return {
                name: '',
                nameError: null,
                nameErrorFlag: false,
                description: '',
                descriptionError: '',
                descriptionErrorFlag: false,
                url: '',
                urlError: '',
                urlErrorFlag: false
            }
        },
        methods: {
            createApp: function () {
                this.nameErrorFlag = false;
                this.nameError = null;
                this.descriptionErrorFlag = false;
                this.descriptionError = null;
                this.urlErrorFlag = false;
                this.urlError = null;
                AppService.newApp(this.name, this.description, this.url).then((res) => {
                    this.$router.push({name: 'appDetails', params: {id: res.data.data.id}});
                }).catch((error) => {
                    if(error.response.status == 422){
                        if(error.response.data.data.name != undefined) {
                            this.nameErrorFlag = true;
                            this.nameError = error.response.data.data.name[0]
                        }
                        if(error.response.data.data.description != undefined) {
                            this.descriptionErrorFlag = true;
                            this.descriptionError = error.response.data.data.description[0]
                        }
                        if(error.response.data.data.url != undefined) {
                            this.urlErrorFlag = true;
                            this.urlError = error.response.data.data.url[0]
                        }
                        console.log(error.response.data.data);
                    } else {
                        alert(error.response.data.msg);
                    }
                });
            }
        },
        mounted: function() {

        }
    }
</script>

