<script>
    import { useLocation } from "svelte-navigator";
    import IconLoading from "../../components/IconLoading.svelte";
    import Modal from "../../components/Modal.svelte";
    import { createLetreroLUR, deleteLetreroLUR } from "../../services/letreros_lur";
    import { createLinea, updateLinea } from "../../services/lineas";
    import FormRuta from "./FormRuta.svelte";
    import { createEventDispatcher } from "svelte";
    import { getPermisosPath } from "$/services/usuarios";
    const dispatch = createEventDispatcher();

    export let ruta = null;
    let form = {};
    let error_messages = null;
    let loading = false;
    let escritura = false;
    let location = useLocation()

    getPermisosPath($location.pathname)
        .then(data => escritura = data.escritura)
        .catch(error => console.log({ error }))

    $: form = { ...ruta };

    async function onSave() {
        try {
            loading = true;
            error_messages = null;
            const { id_linea } = ruta;
            const { route_short_name, route_long_name, linea1, linea2, linea3, linea4, bgcolor1, color1, bgcolor2, color2, } = form;
            if (id_linea) {
                await updateLinea({ id_linea, route_short_name, route_long_name });
            } else {
                await createLinea({ route_short_name, route_long_name });
            }

            await deleteLetreroLUR(route_short_name).catch(() => {});
            await createLetreroLUR({
                codigo: route_short_name,
                linea1,
                linea2,
                linea3,
                linea4,
                bgcolor1,
                color1,
                bgcolor2,
                color2,
            });

            globalThis.toast.success('Datos de ruta guardados correctamente.')
            dispatch("close");
        } catch (error) {
            const data = JSON.parse(error) || null;
            if (data) error_messages = data;
            console.log({ data });
        } finally {
            loading = false;
        }
    }
</script>

<form on:submit|preventDefault={onSave}>
    <Modal
        title="Ruta de Servicio"
        size="xl"
        on:close={() => dispatch("close")}
    >
        <div class={escritura ? "" : "disabled"}>
            <FormRuta {form} />
        </div>

        {#if error_messages}
            <div class="alert alert-danger">
                <ul>
                    {#each Object.entries(error_messages) as [field, message]}
                        <li>{field}: {message[0]}</li>
                    {/each}
                </ul>
            </div>
        {/if}

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

            {#if loading}<IconLoading />{/if}
        </svelte:fragment>
    </Modal>
</form>

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