<script>
    import QrCode from 'svelte-qrcode'
    import IconLoading from "../../components/IconLoading.svelte";
    import { createDispositivo, deleteDispositivo, getDispositivos } from "../../services/dispositivos";
    import { getTiposDispositivo } from "../../services/tipos_dispositivo";
    import { url_base } from "../../services/_config";
    import { getInfoPublic } from '../../services/paraderos';

    export let parada = null;
    let loading = false;
    let tipos_dispositivos = [];
    let dispositivos = [];
    let url_qrcode = null;
    let nuevoDispositivo = null;

    async function fetchDispositivos({ id_paradero = null }) {
        try {
            if (!id_paradero) return;
            loading = true
            dispositivos = await getDispositivos({ id_paradero })
            url_qrcode = `${url_base}/public/infoStop?codigoParadero=${id_paradero}`;
        } catch (error) {
            console.log({ error });
        } finally {
            loading = false
        }
    }

    async function fetchInfoPublico({ id_paradero = null }) {
        try {
            if (!id_paradero) return;
            const info = await getInfoPublic(id_paradero)
            url_qrcode = info.url_public
        } catch (error) {
            console.log({ error });
        }
    }

    async function fetchTiposDispositivos() {
        try {
            tipos_dispositivos = await getTiposDispositivo()
        } catch (error) {
            console.log({ error })
        }
    }

    $: Promise.all([fetchDispositivos(parada), fetchInfoPublico(parada), fetchTiposDispositivos()])

    async function onSave() {
        try {
            loading = true
            await createDispositivo(nuevoDispositivo)
            const tipo_dispositivo = tipos_dispositivos.find(el => el.id_tipo_dispositivo === nuevoDispositivo.id_tipo_dispositivo) || {}
            dispositivos = [ ...dispositivos, { ...nuevoDispositivo, tipo_dispositivo }]
            nuevoDispositivo = null
        } catch (error) {
            alert(error)
        } finally {
            loading = false
        }
    }

    async function onDelete({ id_dispositivo }) {
        try {
            if (!confirm(`Desea eliminar el dispositivo ${id_dispositivo} ?`)) return;
            loading = true
            await deleteDispositivo(id_dispositivo)
            dispositivos = dispositivos.filter(el => el.id_dispositivo !== id_dispositivo)
        } catch (error) {
            alert(error)
        } finally {
            loading = false
        }
    }

</script>

<div>
    <h4 class="mb-3">Dispositivos</h4>
    {#if !nuevoDispositivo}
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>ID Dipositivo</th>
                    <th>Tipo</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                {#each dispositivos as disp}
                <tr>
                    <td>{disp.id_dispositivo}</td>
                    <td>{disp.tipo_dispositivo?.descripcion || '--'}</td>
                    <td><a href={"#"} on:click|preventDefault={() => onDelete(disp)}><i class="bi bi-trash text-danger"></i></a></td>
                </tr>
                {/each}
            </tbody>
        </table>

        <div class="my-3 text-center">
            <button class="btn btn-outline-primary" on:click|preventDefault={() => nuevoDispositivo = {}}>Nuevo Dispositivo</button>
        </div>
    {:else}
        <form action="" on:submit|preventDefault={onSave}>
            <div class="input-group">
                <div class="input-group-text">ID Dispositivo</div>
                <input type="text" class="form-control" bind:value={nuevoDispositivo.id_dispositivo}>
            </div>
            <div class="input-group">
                <div class="input-group-text">Tipo Dispositivo</div>
                <select class="form-select" bind:value={nuevoDispositivo.id_tipo_dispositivo}>
                    {#each tipos_dispositivos as tipo}
                    <option value={tipo.id_tipo_dispositivo}>{ tipo.descripcion }</option>
                    {/each}
                </select>
            </div>

            <div class="d-flex justify-content-between my-3">
                <button type="submit" class="btn btn-primary">Guardar</button>
                <button class="btn btn-outline-secondary" on:click|preventDefault={() => nuevoDispositivo = null}>Cancelar</button>
            </div>
        </form>
    {/if}

    {#if loading}
        <div>
            <IconLoading />
            Cargando información
        </div>
    {/if}

    <div class="m-6"></div>

    <div class="text-center mb-3">
        {#if url_qrcode}
            <QrCode value={url_qrcode} />
        {/if}
    </div>
    <div class="text-center">
        <button class="btn btn-secondary">Imprimir QR</button>
    </div>
</div>