<template>
    <v-container>

        <v-row> 
            <v-spacer></v-spacer>
            <v-breadcrumbs :items="breadcrumbs" style="font-size: 12px"></v-breadcrumbs>
        </v-row>

        <v-divider class="pb-7"></v-divider>
        
        <v-row>
            <v-col cols="12">
                <v-card elevation="5" style="width: 100%; height: auto;" :title="`Process ` +user['firstname']+` `+user['lastname']+ ` Tools Access`" subtitle="Controls creating, editing, deleting users tools access.">
                    <template v-slot:prepend>
                        <v-avatar color="blue-darken-2" size="45">
                            <v-icon size="large" icon="mdi-account-multiple"></v-icon>
                        </v-avatar>
                    </template>
                    <v-card-text>
                        <v-row>
                            <v-col cols="12">
                                <v-data-table :items="userTools" :headers="headers" item-value="toolName" :loading="tableLoading" height="400">
                                    <template v-slot:item.status="{ item }">
                                        <v-chip
                                            :color="getStatusColor(item.status)"
                                            :text="getStatusText(item.status)"
                                            class="text-uppercase"
                                            label
                                            size="small"
                                        ></v-chip>
                                    </template>
                                    <template v-slot:item.actions="{ item }">
                                        <v-hover v-slot="{ isHovering, props }"><v-icon v-if="item.status == 0" size="large" v-bind="props" :color="isHovering ? 'green-accent-1'  : 'green-accent-4'"  icon="mdi-plus-box" @click="createToolModal=true;selectedToolId=item.toolID;loadSelectedtool()"></v-icon></v-hover>
                                        <!--<v-hover v-slot="{ isHovering, props }"><v-icon v-if="item.status == 1" size="large" v-bind="props" :color="isHovering ? 'yellow-accent-1' : 'yellow-accent-4'" variant="plain" icon="mdi-pencil-box"></v-icon></v-hover>-->
                                        <v-hover v-slot="{ isHovering, props }"><v-icon v-if="item.status == 2" size="large" v-bind="props" :color="isHovering ? 'red-accent-1'    : 'red-accent-4'" variant="plain" icon="mdi-close-box" @click="deleteToolSetup(item.toolSetupID)"></v-icon></v-hover>
                                    </template>
                                </v-data-table>
                            </v-col>
                        </v-row>
                    </v-card-text>
                </v-card>            
            </v-col>
        </v-row>

        <v-dialog v-model="createToolModal" persistent max-width="80%">
            <v-row>
                <v-col cols="2"></v-col>
                <v-col cols="4">
                    <v-card>
                        <v-card-title>
                            <v-row justify="end" class="pt-2"><v-hover v-slot="{ isHovering, props }"><v-icon size="small" v-bind="props" :color="isHovering ? 'grey-darken-1' : 'grey-lighten-1'" variant="plain" icon="mdi-close" @click="createToolModal=false"></v-icon></v-hover></v-row>
                        </v-card-title>

                        <v-card-text>
                            <v-row class="d-flex pb-8">
                                <v-col align="center" cols="12" class="pb-0">
                                    <v-avatar color="green-lighten-1" size="80">
                                        <v-icon size="50" icon="mdi-hammer-screwdriver"></v-icon>
                                    </v-avatar>
                                </v-col>
                                <v-col align="center" cols="12" style="font-size: 25px;color:#66BB6A" class="pt-2 mt-0"><strong>Create Tool Access</strong></v-col>
                            </v-row>

                            <v-row wrap no-gutters>
                                <v-col cols="5" class="text-center">
                                    <v-divider class="mt-3" />
                                </v-col>
                                <v-col cols="2" class="text-center">
                                    Tool Info
                                </v-col>
                                <v-col cols="5" class="text-center">
                                    <v-divider class="mt-3" />
                                </v-col>
                            </v-row>

                            <v-row class="d-flex">
                                <v-col cols="12" class="py-0"><v-icon color="#66BB6A" size="30">mdi-cog-box</v-icon><strong> Tool: {{selectedTool.toolName}}</strong> <v-icon color="indigo-darken-3" size="20" @click="openNewWindow(selectedTool.toolURL)">mdi-open-in-new</v-icon></v-col>
                                <v-col cols="12" class="py-0"><v-icon color="#66BB6A" size="30">mdi-office-building</v-icon><strong> Tool Role: {{selectedTool.toolOptionName}}</strong></v-col>
                            </v-row>

                            <v-row wrap no-gutters class="pt-4">
                                <v-col cols="4" class="text-center">
                                    <v-divider class="mt-3" />
                                </v-col>
                                <v-col cols="4" class="text-center">
                                    Tool Account Info
                                </v-col>
                                <v-col cols="4" class="text-center">
                                    <v-divider class="mt-3" />
                                </v-col>
                            </v-row>

                            <!--<v-row class="d-flex">
                                <v-col cols="12" class="py-0">
                                    <v-switch
                                        inset 
                                        dense
                                        v-model="passboltLinkCheckbox"
                                        hide-details
                                        true-value="Yes"
                                        false-value="No"
                                        :label="passboltLinkCheckbox"
                                    >
                                        <template #prepend>
                                            <p class="small">Passbolt Link</p>
                                        </template>
                                    </v-switch>
                                </v-col>
                            </v-row>

                            <v-row class="d-flex" v-if="passboltLinkCheckbox === 'Yes'">
                                <v-col cols="12"><v-text-field type="text" v-model="PassboltLink" label="Passbolt URL"></v-text-field></v-col>
                            </v-row>
                            <v-row class="d-flex" v-if="passboltLinkCheckbox === 'No'">
                                <v-col cols="6"><v-text-field type="text" v-model="Login" label="Login"></v-text-field></v-col>
                                <v-col cols="6"><v-text-field type="text" v-model="Password" label="Password"></v-text-field></v-col>
                            </v-row>
                        -->
                        </v-card-text>
                        <v-divider class="mt-5"></v-divider>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="green darken-1" text @click="saveToolAccess(selectedTool.toolID)">
                                Save
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-col>
                <v-col cols="4">
                    <v-card>
                        <v-card-title>
                            <v-row justify="end" class="pt-2"><v-hover v-slot="{ isHovering, props }"><v-icon size="small" v-bind="props" :color="isHovering ? 'grey-darken-1' : 'grey-lighten-1'" variant="plain" icon="mdi-close" @click="createToolModal=false"></v-icon></v-hover></v-row>
                        </v-card-title>
                        <v-card-text>
                            
                            <v-row class="d-flex pb-4">
                                <v-col align="center" cols="12" class="pb-0">
                                    <v-avatar color="green-lighten-1" size="80">
                                        <v-icon size="50" icon="mdi-account"></v-icon>
                                    </v-avatar>
                                </v-col>
                                <v-col align="center" cols="12" style="font-size: 25px;color:#66BB6A" class="pt-2 mt-0"><strong>User</strong></v-col>
                            </v-row>
                            <v-row class="pb-4">
                                <v-col cols="12" class="py-0">
                                    Firtsname: {{ user['firstname'] }}
                                </v-col>
                                <v-col cols="12" class="py-0">
                                    Lastname: {{ user['lastname'] }}
                                </v-col>
                                <v-col cols="12" class="py-0">
                                    E-Mail: {{ user['email'] }}
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>
            
        </v-dialog> 
   </v-container>
</template>

<script>
export default {
    props: [
      'userId',
      'user'
    ],
    data: () => ({
        breadcrumbs: [
            { title: "Home", disabled: false, href: "/" },
            { title: "Access Manager", disabled: false, href: "/access-manager" },
            { title: "Process User", disabled: true },
        ],

        headers: [
            { title: 'Tool Name', key: 'toolName'},
            { title: 'Tool Status', key: 'status'},
            { title: 'Actions', align: 'start', sortable: false, key: 'actions'}
        ],

        tableLoading: true,
        userTools:[],

        createToolModal:false,
        selectedToolId:null,
        selectedTool:[],

        PassboltLink:'',
        passboltLinkCheckbox:'Yes',

        Login:'',
        Password:''
    }),

    mounted() {
        this.loadUserTools();
    },
    
    methods: {

        saveToolAccess(toolID) {
            let params = {
                PassboltLink: this.PassboltLink,
                passboltLinkCheckbox: this.passboltLinkCheckbox,
                Login: this.Login,
                Password: this.Password
            };

            this.$root.axiosPost('/access-manager-process-usser/'+this.userId+'/tool-access/'+toolID, params).then(data => {
                this.createToolModal=false
                this.loadUserTools();
            });
        },

        loadUserTools() {
            this.tableLoading = true;
            this.$root.axiosGet('/access-manager-process-usser/'+this.userId+'/load-tools').then(data => {
                this.userTools = data.response.data.data;
                this.tableLoading = false;
            }); 
        },

        loadSelectedtool() {
            this.userTools.forEach((el, index) => {
                if (parseInt(el.toolID) === parseInt(this.selectedToolId)) {
                    this.selectedTool = this.userTools[index];
                }
            });
        },

        openNewWindow(url) {
            window.open(url, '_blank');
        },

        deleteToolSetup(ID) {
            this.$root.axiosPost('/access-manager/delete-tool-setup/'+ID, {}).then(data => {
                if (data.response.data.data.userExist == 1) {
                    this.loadUserTools();
                }

                if (data.response.data.data.userExist == 0) {
                    window.location.href = "/access-manager";
                }
            });
        },

        getStatusColor(status) {
            if(status == 0) {
                return 'red';
            }
            if(status == 1) {
                return 'green';
            }
            if(status == 2) {
                return 'red';
            }
        },
        getStatusText(status) {
            if(status == 0) {
                return 'not created';
            }
            if(status == 1) {
                return 'created';
            }
            if(status == 2) {
                return 'delete';
            }
        }
    },
}
</script>

