<script>
    import Modal from "../../components/Modal.svelte";
    import { getOperador, createOperador, updateOperador, deleteOperador } from "$/services/operadores";
    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher();

    export let operador = {};
    export let escritura = false;
    let form = {}
    let loading = false;

    $: begin(operador.id_operador)

    async function begin(id) {
        try {
            if (!id) return;
            form = await getOperador(id) || {}
        } catch (error) {
            globalThis.toast.success(error.detail || error)
        }
    }

    async function onSave() {
        try {
            loading = true;
            if (operador.id_operador) {
                form = await updateOperador(form)
            } else {
                form = await createOperador(form)
            }
            globalThis.toast.success('Se ha guardado el Operador')
            dispatch('refresh')
            dispatch('close')
        } catch (error) {
            if (error.detail) {
                globalThis.toast.success(error.detail)
            } else {
                globalThis.toast.success(JSON.stringify(error))
            }
        } finally {
            loading = false;
        }
    }

    async function onDelete() {
        try {
            if (!confirm('Eliminará el registro?')) return;
            loading = true;
            await deleteOperador(form.id_operador)
            globalThis.toast.success('Se ha eliminado el Operador')
            dispatch('refresh')
            dispatch('close')
        } catch (error) {
            globalThis.toast.error(error.detail || error)
        } finally {
            loading = false;
        }
    }
</script>

<form action="" on:submit|preventDefault={onSave}>
    <Modal title={'Operador #' + (operador.id_operador || 'Nuevo')}
        size="lg"
        on:close={() => dispatch('close')}>
        <div class={"form" + (escritura ? '' : ' disabled')}>
            <div class="row mb-3">
                <div class="col-md-3">ID</div>
                <div class="col-md">
                    {#if operador.id_operador}
                        <input type="text" value={form.id_operador} disabled class="form-control">
                    {:else}
                        <input type="text" bind:value={form.id_operador} required class="form-control">
                    {/if}
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-3">Nombre</div>
                <div class="col-md">
                    <input type="text" bind:value={form.nombre_operador} 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.vigente} role="switch" id="vigente">
                    <label class="form-check-label" for="vigente">Vigente</label>
                </div>
            </div>
        </div>
        <svelte:fragment slot="buttons">
            {#if escritura}
                <button class="btn btn-primary"type="submit" disabled={loading}>Guardar</button>
                <button class="btn btn-danger" on:click|preventDefault={onDelete} disabled={loading}>Eliminar</button>
            {/if}
        </svelte:fragment>
    </Modal>
</form>

<style>
    .disabled { pointer-events: none !important; }
</style>