<template>
    <v-dialog v-model="newRoleModal" 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="closeNewRoleModal()"></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-briefcase-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 Job Role</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">
                        Role Info
                    </v-col>
                    <v-col cols="5" class="text-center">
                        <v-divider class="mt-3" />
                    </v-col>
                </v-row>

                <v-row>
                    <v-col cols="12">
                        <v-text-field type="text" v-model="RoleName" label="Role Name (Required)" ref="RoleName" :error="isError('RoleName')" :error-messages="isErrorMessage('RoleName')"></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">
                        Role Tools
                    </v-col>
                    <v-col cols="5" class="text-center">
                        <v-divider class="mt-3" />
                    </v-col>
                </v-row>

                <v-row v-for="(RoleTool, i) in RoleTools" :key="i" class="text-fields-row">
                    <v-col cols="6" >
                        <v-select label="Tool" v-model="RoleTool.tool" :items="noDefaultTools" item-title="name" item-value="id" variant="solo-filled"></v-select>
                    </v-col>
                    <v-col cols="6" >
                        <v-select label="Tool Role" v-model="RoleTool.role" :items="ToolsRoles[RoleTool.tool]" item-title="option" item-value="id" variant="solo-filled" multiple>
                            <template v-slot:append>
                                <v-hover v-slot="{ isHovering, props }">       
                                    <v-icon v-bind="props" :color="isHovering ? 'red-accent-2' : 'red-accent-4'" @click="removeTool(i)">mdi-trash-can-outline</v-icon> 
                                </v-hover> 
                            </template>
                            <template v-slot:selection="{ item, index }">
                                <v-chip v-if="index < 2">
                                    <span>{{ item.title }}</span>
                                </v-chip>
                                <span v-if="index === 2" class="text-grey text-caption align-self-center">
                                    (+{{ RoleTools[i].role.length - 2 }})
                                </span>
                            </template>
                        </v-select>
                    </v-col>
                </v-row>
                <v-row class="my-0">
                    <v-col cols="6">
                        <v-btn variant="text" @click="addToolToRole()" class="primary" color="green" prepend-icon="mdi-plus">Add Tool</v-btn>
                    </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="closeNewRoleModal()">
                    Close
                </v-btn>
                <v-spacer></v-spacer>
                <v-btn color="green darken-1" text @click="saveNewRole()">
                    Create
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog> 
</template>
<script scoped>
    export default {
        expose: ['showDialog'],
        data: () => ({
            newRoleModal: false,
            RoleName: "",
            RoleTools:[],
            ToolsRoles:[],
            noDefaultTools:[],
            noDefaultToolsHolder:[],
            errors:{},
            errorsMessages:{},
        }),

        methods: {
            showDialog() {
                this.loadNotDefaultTools();
                this.loadToolRoles();
                this.newRoleModal = true;
            },

            closeNewRoleModal() {
                this.errors = {};
                this.errorsMessages = {};
                this.newRoleModal = false;
                this.RoleName = "";
                this.RoleTools = [];

            },

            addToolToRole() {
                this.RoleTools.push({
                    tool: "",
                    role: [],
                })
            },

            removeTool(index) {
                this.RoleTools.splice(index, 1)
            },

            loadToolRoles() {
                this.$root.axiosGet('/role-manager-load-tools-roles').then(data => {
                    this.ToolsRoles = data.response.data.data;
                }); 
            },

            loadNotDefaultTools() {
                this.$root.axiosGet('/role-manager-load-nodefault-tools').then(data => {
                    this.noDefaultTools = data.response.data.data;
                    this.noDefaultToolsHolder = this.noDefaultTools;
                }); 
            },

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

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

            saveNewRole() {
                this.$root.$refs.overlay.showOverlay(true);
                this.errors = {};
                this.errorsMessages = {};
                let response;
                let params = {
                    RoleName: this.RoleName,
                    RoleTools: this.RoleTools
                };

                console.log(params);

                this.$root.axiosPost('/role-manager', 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.closeNewRoleModal();
                        this.$emit('load-roles');
                    }
                });
            }
        }
    }
</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>