<script>
    import Modal from "$/components/Modal.svelte";
    import { getParadero, getUrlImagen, createParadero, updateParadero, deleteParadero, saveImageParadero } from "$/services/paraderos";

    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher();

    export let paradero = { id_paradero: null };
    let form = {};
    let inputfile = null;
    let imagenEl = null;

    $: infoParadero(paradero)

    async function infoParadero({ id_paradero }) {
        try {
            if (!id_paradero) return;
            form = await getParadero(id_paradero)
        } catch (error) {
            globalThis.toast.error(error)
        }
    }

    async function onSaveParadero() {
        try {
            form = form.id_paradero ? await updateParadero(form) : await createParadero(form)
            globalThis.toast.success('Información guardada')
        } catch (error) {
            globalThis.toast.error(error)
        }
    }

    async function onDeleteParadero() {
        try {
            await deleteParadero(form.id_paradero)
            globalThis.toast.success('Paradero eliminado')
            dispatch('delete', form)
            dispatch('close')
        } catch (error) {
            globalThis.toast.error(error)
        }
    }

    async function onChangeImage() {
        try {
            const { url_image } = await saveImageParadero(paradero.id_paradero, inputfile.files[0])
            imagenEl.src = url_image + '?nocache=' + (new Date()).valueOf()
            globalThis.toast.success('Imagen cambiada')
        } catch (error) {
            globalThis.toast.error(error)
        }
    }
</script>

<form on:submit|preventDefault={onSaveParadero}>
    <Modal size="lg"
        title={'Paradero #' + paradero.id_paradero}
        on:close={() => dispatch('close')}>

        <div class="input-group mb-3">
            <div class="input-group-text">Dirección</div>
            <input type="text" bind:value={form.stop_name} class="form-control">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-text">Latitud</div>
            <input type="number" step="any" disabled value={form.stop_lat} class="form-control">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-text">Longitud</div>
            <input type="number" step="any" disabled value={form.stop_lon} class="form-control">
        </div>

        {#if form.id_paradero}
            <div class="input-group mb-3">
                <div class="input-group-text"><i class="bi bi-image"></i></div>
                <div class="form-control"><input type="file" bind:this={inputfile}></div>
                <button class="btn btn-primary" on:click|preventDefault={onChangeImage}>Cambiar Imagen</button>
            </div>

            <img alt="Imagen Paradero" class="img-fluid" bind:this={imagenEl} src={getUrlImagen(form.id_paradero)}>
        {/if}

        <svelte:fragment slot="buttons">
            <button type="submit" class="btn btn-primary me-2">
                <i class="bi bi-save"></i> Guardar
            </button>
            <button class="btn btn-danger me-2" on:click|preventDefault={onDeleteParadero}>
                <i class="bi bi-trash"></i> Eliminar
            </button>
        </svelte:fragment>
    </Modal>
</form>