<script>
    import Modal from "../../components/Modal.svelte";
    import { getRedTransporte, createRedTransporte, updateRedTransporte, deleteRedTransporte,  getRedTransporteId } from "$/services/red_transporte";
    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher();

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

    $: begin(red.id_red)

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

    async function onSave() {
        try {
           
            loading = true;
            if (red.id_red) {
                form = await updateRedTransporte(form)
            } else {
                form = await createRedTransporte(form)
            }
            globalThis.toast.success('Se ha guardado la Red de Transporte')
            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 deleteRedTransporte(form.id_red)
            globalThis.toast.success('Se ha eliminado la Red de Transporte')
            dispatch('refresh')
            dispatch('close')
        } catch (error) {
            globalThis.toast.error(error.detail || error)
        } finally {
            loading = false;
        }
    }
</script>

<form action="" on:submit|preventDefault={onSave}>
    <Modal title={'Red de Transporte #' + (red.id_red || '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 red.id_red}
                        <input type="number" value={form.id_red} disabled class="form-control">
                    {:else}
                        <input type="number" bind:value={form.id_red} 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_red} required class="form-control">
                </div>
            </div>
            <div class="mb-3">
                <div class="col-md-3">Descripcion</div>
                <div class="col-md">
                    <input type="text" bind:value={form.descripcion}   class="form-control">
                </div>
            </div> 
            <div class="mb-4">
                <div class="col-md-3">URL GTFS-RT</div>
                <div class="col-md">
                    <input type="text" bind:value={form.url_gtfs_rt}   class="form-control">
                </div>
            </div> 
            <div class="mb-5">
                <div class="col-md-3">API Key</div>
                <div class="col-md">
                    <input type="text" bind:value={form.api_key}   class="form-control">
                </div>
            </div> 
            <div class="mb-6">
                <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>