<template>
    <div style="margin-top: 50px;">

        <v-container grid-list-md pa-10>
            <v-layout row wrap>
                <v-flex md12 v-if="app != null">
                    <h1>App {{ app.name }}</h1>
                    <v-card class="mx-auto" flat style="margin-top: 10px;">
                        <v-tabs
                                background-color="white"
                                color="fff"
                                left

                        >
                            <v-tab>Overview</v-tab>
                            <v-tab>API Access</v-tab>
                            <v-tab>Settings</v-tab>
                            <v-tab>Permissions</v-tab>
                            <v-tab>Users</v-tab>

                            <v-tab-item :key="1" :transition="false"  :reverse-transition="false" >
                                <v-container style="padding-right: 0px; padding-left:0px;">
                                    <img :src="imageUrl" style="float: right;max-width: 300px;">
                                    <b>Description</b><br>
                                    {{ app.description }}<br><br>
                                    <a :href="app.url">{{ app.url }}</a>
                                </v-container>

                            </v-tab-item>
                            <v-tab-item :key="2" :transition="false"  :reverse-transition="false">
                                <v-container style="padding-right: 0px; padding-left:0px;">
                                    <h2>oAuth Token</h2>
                                    <p>
                                        Here are the oAuth API-Keys. You use this Keys to start the oAuth authorization work flow.
                                    </p>
                                    <v-text-field
                                            label="API Key"
                                            :value="app.apiKey"
                                            hint="You can't edit this"
                                    ></v-text-field>
                                    <v-text-field
                                            label="API Secret"
                                            :value="app.apiSecret"
                                            hint="You can't edit this"
                                    ></v-text-field>
                                    <br>
                                    <!--<h2>API Access</h2>
                                    <p>
                                        You can access the API to get informations about this APP with the following API Credentials:
                                        <v-text-field
                                                label="API Token"
                                                value=""
                                                disabled
                                        ></v-text-field>
                                        <v-text-field
                                                label="Refresh Token"
                                                value=""
                                                disabled
                                        ></v-text-field>
                                    <h2>Development Access</h2>
                                    <p>
                                        To test the App you can use the following Developer Access and Refresh token, they are connected to your user.
                                        <v-text-field
                                                label="Access Token"
                                                value=""
                                                disabled
                                        ></v-text-field>
                                        <v-text-field
                                                label="Refresh Token"
                                                value=""
                                                disabled
                                        ></v-text-field>
                                    </p>!-->
                                </v-container>
                            </v-tab-item>
                            <v-tab-item :key="3" :transition="false"  :reverse-transition="false">
                                <v-container style="padding-right: 0px; padding-left:0px;">
                                    <v-layout>
                                        <v-flex md8>
                                            <v-text-field
                                                    label="App Name"
                                                    v-model="app.name"
                                            ></v-text-field>
                                            <v-text-field
                                                    label="URL"
                                                    v-model="app.url"
                                            ></v-text-field>
                                            <v-textarea
                                                    label="Description"
                                                    v-model="app.description"

                                            ></v-textarea>
                                            <v-text-field
                                                    label="Direct Login URL"
                                                    v-model="app.directUrl"
                                                    hint="URL to login with this oAuth Provider"
                                            ></v-text-field>
                                            <v-checkbox
                                                    v-model="app.properties.testingWarning"
                                                    label="Testing Warning"
                                                    disabled
                                            ></v-checkbox>
                                            <v-checkbox
                                                    v-model="app.properties.untrustedWarning"
                                                    label="Untrusted Warning"
                                                    disabled
                                            ></v-checkbox>
                                            <v-checkbox
                                                    v-model="app.properties.autoAccept"
                                                    label="Auto Accept"
                                                    disabled
                                            ></v-checkbox>
                                            <v-checkbox
                                                    v-model="app.properties.showOnWebpage"
                                                    label="Show on Webpage"
                                                    disabled
                                            ></v-checkbox>
                                            <v-checkbox
                                                    v-model="app.properties.stopAutoRedirect"
                                                    label="Stop Auto Redirect"
                                                    disabled
                                            ></v-checkbox>
                                            <v-checkbox
                                                    v-model="app.properties.hideInAppList"
                                                    label="Hide in App List"
                                                    disabled
                                            ></v-checkbox>
                                            <v-checkbox
                                                    v-model="app.properties.userCantRemoveApp"
                                                    label="Disabled user possible to remove App-Access"
                                                    disabled
                                            ></v-checkbox>


                                            <v-btn color="success" @click="updateSettings()" >Speichern</v-btn>
                                        </v-flex>
                                        <v-flex md4>
                                            <UploadAppImage :appId="app.id"></UploadAppImage>
                                        </v-flex>

                                    </v-layout>
                                </v-container>
                            </v-tab-item>
                            <v-tab-item :key="4" :transition="false"  :reverse-transition="false">
                                <v-container style="padding-right: 0px; padding-left:0px;">
                                    <p>
                                        <v-alert type="warning">
                                            This feature coming soon.
                                        </v-alert>
                                        Beim ändern der Permissions müssen alle User den Zugriff erneut bestätigen.

                                        <v-checkbox
                                                v-model="app.access.oAuth"
                                                label="Use oAuth"
                                                disabled
                                        ></v-checkbox>
                                        <v-checkbox
                                                v-model="app.access.api"
                                                label="Make API-Requests"
                                                disabled
                                        ></v-checkbox>
                                        <v-checkbox
                                                v-model="app.access.update_apps"
                                                label="Update the Users App"
                                                disabled
                                        ></v-checkbox>
                                        <v-checkbox
                                                v-model="app.access.update_profile"
                                                label="Update the User Profile"
                                                disabled
                                        ></v-checkbox>
                                        <v-checkbox
                                                v-model="app.access.update_access"
                                                label="Update the User Access list (revoke Access)""
                                                disabled
                                        ></v-checkbox>
                                        <v-checkbox
                                                v-model="app.access.read_access"
                                                label="Read all Access from the User"
                                                disabled
                                        ></v-checkbox>
                                        <v-checkbox
                                                v-model="app.access.read_apps"
                                                label="Read all Apps from the User"
                                                disabled
                                        ></v-checkbox>
                                        <v-checkbox
                                                v-model="app.access.read_profile"
                                                label="Read the User-Profil Information"
                                                disabled
                                        ></v-checkbox>
                                    </p>
                                </v-container>
                            </v-tab-item>
                            <v-tab-item :key="4" :transition="false"  :reverse-transition="false">

                                <v-simple-table>
                                    <template v-slot:default>
                                        <thead>
                                        <tr>
                                            <th class="text-left">Username</th>
                                            <th class="text-right">Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="user in appUser">
                                            <td>{{ user.username }}</td>
                                            <td class="text-right"><i>None</i></td>
                                        </tr>
                                        </tbody>
                                    </template>
                                </v-simple-table>
                            </v-tab-item>

                        </v-tabs>
                    </v-card>
                </v-flex>



            </v-layout>
        </v-container>


    </div>

</template>

<script>
    import ServerService from '../services/Server'
    import UserService from '../services/User'
    import LoginComponent from '../components/Login'
    import AppService from '../services/Apps'
    import UploadAppImageComponent from '../components/UploadAppImage'

    export default {
        data () {
            return {
                app: null,
                imageUrl: '',
                appUser: []
            }
        },
        components: {
            "Login": LoginComponent,
            "UploadAppImage": UploadAppImageComponent
        },
        methods: {
            'updateSettings': function () {
                AppService.updateApp(this.app).then((res) => {
                    if(res.data.success) {
                        alert("Änderung erfolgreich gespeichert");
                    } else {
                        alert("FEHLER: "+res.data.msg);
                    }
                    this.app = res.data.data;
                }, (res) => {
                    alert("FEHLER: "+res.response.data.msg);
                })
            }
        },
        mounted: function() {
            AppService.getApp(this.$route.params.id).then((res) => {
                this.app = res.data.data;
            })
            AppService.getUser(this.$route.params.id).then((res) => {
                console.log("Users", res.data.data)
                this.appUser = res.data.data;
            })
            this.imageUrl = AppService.getAppImage(this.$route.params.id);
        }
    }
</script>

<style>

</style>
