<script>
    import Modal from "../../components/Modal.svelte";
    import { getRolyaplicacion, createRolyaplicacion, updateRolyaplicacion, deleteRolyaplicacion } from "$/services/rolesyaplicaciones";
    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher();

    export let rol = {}
    let form = {}
    let loading = false;

    $: begin(rol.id_aplicacion)

    async function begin(id) {
        try {
            if (!id) return;
            form = await getRolyaplicacion(id) || {}
        } catch (error) {
            alert(error.detail || error)
        }
    }

    async function onSave() {
        try {
            loading = true;
            if (rol.id_aplicacion) {
                form = await updateRolyaplicacion(form)
            } else {
                form = await createRolyaplicacion(form)
            }
            alert('Se ha guardado la aplicación')
            dispatch('refresh')
            dispatch('close')
        } catch (error) {
            if (error.detail) {
                alert(error.detail)
            } else {
                alert(JSON.stringify(error))
            }
        } finally {
            loading = false;
        }
    }

    async function onDelete() {
        try {
            if (!confirm('Eliminará el registro?')) return;
            loading = true;
            await deleteRolyaplicacion(form.id_aplicacion)
            alert('Se ha eliminado la aplicación')
            dispatch('refresh')
            dispatch('close')
        } catch (error) {
            alert(error.detail || error)
        } finally {
            loading = false;
        }
    }

   
</script>

<form action="" on:submit|preventDefault={onSave}>
    <Modal title={'Aplicacion #' + (rol.id_aplicacion || 'Nuevo')}
        size="lg"
        on:close={() => dispatch('close')}>
        <div class="form">
            <div class="row mb-3">
                <div class="col-md-3">ID app</div>
                <div class="col-md">
                    {#if rol.id_aplicacion}
                        <input type="number" value={form.id_aplicacion}  disabled class="form-control">
                    {:else}
                        <input type="number" bind:value={form.id_aplicacion} required class="form-control">
                    {/if}
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-3">ID rol</div>
                <div class="col-md">
                    <input type="text" bind:value={form.id_rol} required class="form-control">
                </div>
            </div>
            <div class="mb-3">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" bind:checked={form.solo_visualizar} role="switch" id="vigente">
                    <label class="form-check-label" for="vigente">solo_visualizar</label>
                </div>
            </div>
        </div>
        <svelte:fragment slot="buttons">
            <button class="btn btn-primary"type="submit" disabled={loading}>Guardar</button>
            <button class="btn btn-danger" on:click|preventDefault={onDelete} disabled={loading}>Eliminar</button>
        </svelte:fragment>
    </Modal>
</form>