<template>
    <v-dialog v-model="newToolModal" persistent max-width="700">
        <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="closeNewToolModal()"></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-book-plus"></v-icon>
                        </v-avatar>
                    </v-col>
                    <v-col align="center" cols="12" style="font-size: 25px;color:#66BB6A" class="pt-0 mt-0"><strong>New Tool</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>
                    <v-col cols="6">
                        <v-text-field type="text" label="Tool Name (Required)" v-model="ToolName" ref="ToolName" :error="isError('ToolName')" :error-messages="isErrorMessage('ToolName')"></v-text-field>
                    </v-col>
                    <v-col cols="6">
                        <v-text-field type="text" label="Tool URL (Optional)" v-model="ToolUrl" ref="ToolName" :error="isError('ToolUrl')" :error-messages="isErrorMessage('ToolUrl')"></v-text-field>
                    </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">
                        Roles
                    </v-col>
                    <v-col cols="5" class="text-center">
                        <v-divider class="mt-3" />
                    </v-col>
                </v-row>

                <v-row>
                    <v-col cols="6" v-for="(ToolRole, i) in ToolRoles" :key="i" class="text-fields-row">
                        <v-text-field label="Role" v-model="ToolRole.role" append-icon="" append-icon-color="red" >
                            <template v-slot:append>
                                <v-hover v-slot="{ isHovering, props }">       
                                    <v-icon v-bind="props" :color="isHovering ? 'red-accent-2' : 'red-accent-4'" @click="remove(i)">mdi-trash-can-outline</v-icon> 
                                </v-hover> 
                            </template>
                        </v-text-field>
                    </v-col>
                </v-row>

                <v-row class="my-0">
                    <v-col cols="6">
                        <v-btn variant="text" @click="add" class="primary" color="green" prepend-icon="mdi-plus">Add Role</v-btn>
                    </v-col>
                </v-row>
                

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

                <v-row>
                    <v-col cols="4" class="py-0">
                        <v-switch v-model="onlineTool" hide-details true-value="Yes" false-value="No" color="green-accent-3">
                            <template #prepend>
                                <p class="mr-1">Online Tool </p>
                                <v-tooltip v-model="onlineToolTooltip" location="top">
                                    <template v-slot:activator="{ props }">
                                        <v-icon v-bind="props" size="small" color="cyan-darken-3" style="cursor: pointer">mdi-chat-question-outline</v-icon>
                                    </template>
                                    <span>Self hosted tool.</span>
                                </v-tooltip>
                            </template>
                        </v-switch>
                    </v-col>
                    <v-col cols="4" class="py-0">
                        <v-switch v-model="toolHas2FA" hide-details true-value="Yes" false-value="No" color="green-accent-3">
                            <template #prepend>
                                <p class="mr-1">Tool has 2FA</p>
                                <v-tooltip v-model="toolHas2FaTooltip" location="top">
                                    <template v-slot:activator="{ props }">
                                        <v-icon v-bind="props" size="small" color="cyan-darken-3" style="cursor: pointer">mdi-chat-question-outline</v-icon>
                                    </template>
                                    <span>Tool requires 2FA auth.</span>
                                </v-tooltip>
                            </template>
                        </v-switch>
                    </v-col>
                    <v-col cols="4" class="py-0">
                        <v-switch v-model="defaultTool" hide-details true-value="Yes" false-value="No" color="green-accent-3">
                            <template #prepend>
                                <p class="mr-1">Default Tool</p>
                                <v-tooltip v-model="defaultToolTooltip" location="top">
                                    <template v-slot:activator="{ props }">
                                        <v-icon v-bind="props" size="small" color="cyan-darken-3" style="cursor: pointer">mdi-chat-question-outline</v-icon>
                                    </template>
                                    <span>Tool will be auto assigned to all new user.</span>
                                </v-tooltip>
                            </template>
                        </v-switch>
                    </v-col>
                </v-row>

            </v-card-text>
            <v-divider class="mt-5"></v-divider>
            <v-card-actions>
                <v-btn color="red darken-1" text @click="closeNewToolModal()">
                    Close
                </v-btn>
                <v-spacer></v-spacer>
                <v-btn color="green darken-1" text @click="saveNewTool()">
                    Create
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog> 
</template>
<script scoped>
    export default {
        expose: ['showDialog'],
        data: () => ({
            newToolModal: false,

            errors: {},
            errorsMessages:{},

            ToolName: "",
            ToolUrl: "",
            defaultTool: 'No',
            onlineTool: 'No',
            toolHas2FA: 'No',
            //ToolRoles: [{role:'No Role'}],
            ToolRoles:[],

            onlineToolTooltip:false,
            toolHas2FaTooltip:false,
            defaultToolTooltip:false,
        }),

        methods: {
            showDialog() {
                this.newToolModal = true;
            },

            closeNewToolModal()
            {
                this.errors         = {};
                this.errorsMessages = {};
                this.newToolModal   = false;
                this.ToolName       = '';
                this.ToolRoles      =  [];
                this.onlineTool     = 'No';
                this.toolHas2FA     = 'No';
                this.defaultTool    ='No';
                this.ToolUrl        = '';
            },

            add () {
                this.ToolRoles.push({
                    role: "",
                })
            },

            remove (index) {
                this.ToolRoles.splice(index, 1)
            },

            isError(fieldName) {
                return this.errors[fieldName];
            },

            isErrorMessage(fieldName) {
                return this.errorsMessages[fieldName];
            },

            saveNewTool() {
                this.errors = {};
                this.errorsMessages = {};
                let response;
                let params = {
                    ToolName:   this.ToolName,
                    ToolRoles:  this.ToolRoles,
                    onlineTool: this.onlineTool,
                    toolHas2FA: this.toolHas2FA,
                    defaultTool:this.defaultTool,
                    ToolUrl:    this.ToolUrl,
                };
                this.$root.$refs.overlay.showOverlay(true);
                this.$root.axiosPost('/tool-new', null, params).then(data => {
                    response = data.response.data;
                    this.$root.$refs.overlay.showOverlay(false);
                    if (response.status === 'Error') {
                        if (response.message === 'Validation Error.') {
                            response.data.forEach((el, index) => {
                                Object.entries(el).forEach((el1, index1) => {
                                    this.errors[el1[0]] = !this.isError(el1[0]);
                                    this.errorsMessages[el1[0]] = el1[1];
                                });
                            });
                        }
                    } else {
                        this.closeNewToolModal();
                        this.$emit('load-tools');
                    }
                });
            },
        }
    }
</script>
<style scoped>
.custom-icon {
  border: 5px solid #64DD17; /* Set your desired border color */
  border-radius: 50%; /* Use border-radius to make it circular */
  padding: 40px; /* Adjust padding for spacing between the border and icon */
}
</style>