<script>
    import Modal from "$/components/Modal.svelte";
    import { getAplicaciones } from "$/services/aplicaciones";
    import { createRol, deleteRol, getRol, updateRol } from "$/services/roles";
    import { createRolyaplicacion, deleteRolyaplicacion, getRolesyaplicaciones, updateRolyaplicacion } from "$/services/roles_aplicaciones";
    import { createRolOperador, deleteRolOperador, getRolOperadores } from '$/services/roles_operadores';
    import { createEventDispatcher } from "svelte";
    import TabForm from "./TabForm.svelte";
    import TabAplicaciones from "./TabAplicaciones.svelte";
    import TabOperadores from "./TabOperadores.svelte";
    import "./modal.css"
    import { getOperadores } from "$/services/operadores";
    const dispatch = createEventDispatcher()

    export let rol = {};
    export let escritura = false;
    let loading = false
    let form = {}
    let permisos_app = []
    let permisos_operadores = []
    let tab = 0

    async function fetchRol({ id_rol = null }) {
        try {
            if (!id_rol) return;
            form = await getRol(id_rol) || {}
            await fetchPermisosAplicaciones(id_rol)
            await fetchPermisosOperadores(id_rol)
        } catch (error) {
            globalThis.toast.error(error)
        }
    }

    async function fetchPermisosAplicaciones(id_rol) {
        try {
            const aplicaciones = await getAplicaciones({ ordering: 'nombre_app' })
            const rol_aplicaciones = await getRolesyaplicaciones(id_rol)

            permisos_app = aplicaciones.map(app => {
                const item = rol_aplicaciones.find(el => el.id_aplicacion === app.id_aplicacion)
                const acceso = !!item
                const { id_rol_app = null, solo_visualizar = false} = item || {}

                return { ...app, id_rol_app, acceso, solo_visualizar, modificado: false }
            })
        } catch (error) {
            globalThis.toast.error(error)
        }
    }

    async function fetchPermisosOperadores(id_rol) {
        try {
            const operadores = await getOperadores({ ordering: 'nombre_operador' })
            const rol_operadores = await getRolOperadores({ id_rol })

            permisos_operadores = operadores.map(operador => {
                const item = rol_operadores.find(el => el.id_operador === operador.id_operador)
                const acceso = !!item;
                return { ...operador, id_rol_operador: item?.id_rol_operador || null, acceso, modificado: false }
            })
        } catch (error) {
            globalThis.toast.error(error)
        }
    }

    async function onSaveRol() {
        try {
            if (rol.id_rol) {
                form = await updateRol(form)
            } else {
                form = await createRol(form)
                await fetchPermisosAplicaciones(form.id_rol)
                await fetchPermisosOperadores(form.id_rol)
            }
            dispatch('refresh')
            globalThis.toast.success('Propiedades del Rol guardadas.')
        } catch (error) {
            globalThis.toast.error(error)
        }
    }

    async function onDeleteRol() {
        try {
            if (!confirm(`Desea elimina el rol ${rol.nombre_rol}?`)) return;
            await deleteRol(rol.id_rol)
            dispatch('refresh')
            dispatch('close')
            globalThis.toast.success('Rol eliminado.')
        } catch (error) {
            globalThis.toast.error(error)
        }
    }

    async function onSavePermisos() {
        try {
            const modificados = permisos_app.filter(el => el.modificado)
            const { id_rol } = rol;
            for (let permiso of modificados) {
                if (!permiso.acceso && permiso.id_rol_app) {
                    await deleteRolyaplicacion(permiso.id_rol_app)
                }
                if (permiso.acceso && !permiso.id_rol_app) {
                    const { id_aplicacion, solo_visualizar = false } = permiso;
                    await createRolyaplicacion({ id_rol, id_aplicacion, solo_visualizar })
                }
                if (permiso.acceso && permiso.id_rol_app) {
                    const { id_rol_app, solo_visualizar = false } = permiso;
                    await updateRolyaplicacion({ id_rol_app, solo_visualizar })
                }
            }
            globalThis.toast.success('Permisos de aplicaciones guardadas')
        } catch (error) {
            globalThis.toast.error(error)
        }
    }

    async function onSaveOperadores() {
        try {
            const modificados = permisos_operadores.filter(el => el.modificado)
            const { id_rol } = rol;

            for (let permiso of modificados) {
                if (!permiso.acceso && permiso.id_rol_operador) {
                    await deleteRolOperador(permiso.id_rol_operador)
                }
                if (permiso.acceso && !permiso.id_rol_operador) {
                    const { id_operador } = permiso;
                    await createRolOperador({ id_rol, id_operador })
                }
            }
            globalThis.toast.success('Permisos de operadores guardadas')

        } catch (error) {
            globalThis.toast.error(error)
        }
    }

    $: fetchRol(rol)
</script>

<form action="" on:submit|preventDefault={onSaveRol}>
    <Modal classBody="mymodal" title={"rol #" + (rol.id_rol || "Nuevo")} size="lg" on:close={() => dispatch("close")}>
        <ul class="nav nav-tabs">
            <li class="nav-item">
              <a class={"nav-link" + (tab === 0 ? ' active' : '')} href={"#"} on:click|preventDefault={() => tab = 0}>Propiedades</a>
            </li>
            <li class={"nav-item" + (form.id_rol ? '' : ' disabled')}>
              <a class={"nav-link" + (tab === 1 ? ' active' : '')} href={"#"} on:click|preventDefault={() => tab = 1}>Aplicaciones</a>
            </li>
            <li class={"nav-item" + (form.id_rol ? '' : ' disabled')}>
              <a class={"nav-link" + (tab === 2 ? ' active' : '')} href={"#"} on:click|preventDefault={() => tab = 2}>Operadores</a>
            </li>
        </ul>

        <div class="p-3 bg-white">
            {#if tab === 0}
                <TabForm bind:form={form} {escritura} />
            {/if}
    
            {#if tab === 1}
                <TabAplicaciones bind:permisos={permisos_app} {escritura} />
            {/if}
    
            {#if tab === 2}
                <TabOperadores bind:permisos={permisos_operadores} {escritura} />
            {/if}
        </div>


        <svelte:fragment slot="buttons">
            {#if escritura}
                {#if tab === 0}
                    <button class="btn btn-primary" type="submit" disabled={loading}>
                        <i class="bi bi-save"></i> Guardar
                    </button>

                    {#if rol.id_rol}
                        <button class="btn btn-danger" on:click|preventDefault={onDeleteRol} disabled={loading}>
                            <i class="bi bi-trash"></i> Eliminar
                        </button>
                    {/if}
                {/if}

                {#if tab === 1}
                    <button class="btn btn-primary" type="button" disabled={loading} on:click|preventDefault={onSavePermisos}>
                        <i class="bi bi-save"></i> Guardar Permisos Aplicaciones
                    </button>
                {/if}

                {#if tab === 2}
                    <button class="btn btn-primary" type="button" disabled={loading} on:click|preventDefault={onSaveOperadores}>
                        <i class="bi bi-save"></i> Guardar Permisos Operadores
                    </button>
                {/if}
            {/if}
        </svelte:fragment>
    </Modal>
</form>
