<script>
    export let parada = null;
    let table = null;
    let data = [{}];

    function onKeyDownCell(ev) {
        if (ev.key === "Escape") {
            ev.target.blur();
            return;
        }
        if (ev.key === "Enter") {
            ev.returnValue = false;
            const { nextElementSibling: nextTd } = ev.target;
            if (nextTd && nextTd.contentEditable === "true") {
                nextTd.focus();
            } else if (nextTd && nextTd.querySelector("input")) {
                nextTd.querySelector("input").focus();
            } else {
                ev.target.blur();
                const { cellIndex } = ev.target;
                const rowTable = ev.target.parentElement;
                if (rowTable.children.length === cellIndex + 1) {
                    data = [...data, {}];
                    setTimeout(() => {
                        table
                            .querySelector("tbody > tr:last-child > td")
                            .focus();
                    }, 0);
                }
            }
            return;
        }
        if (ev.key === "ArrowDown") {
            const { cellIndex } = ev.target;
            const { rowIndex } = ev.target.parentElement;
            const rowTable =
                table.querySelectorAll("tbody tr")[rowIndex] || null;
            if (rowTable) {
                ev.target.blur();
                const cellTable = rowTable.querySelectorAll("td")[cellIndex];
                cellTable.focus();
            }
            return;
        }
        if (ev.key === "ArrowUp") {
            const { cellIndex } = ev.target;
            const { rowIndex } = ev.target.parentElement;
            const rowTable =
                table.querySelectorAll("tbody tr")[rowIndex - 2] || null;
            if (rowTable) {
                ev.target.blur();
                const cellTable = rowTable.querySelectorAll("td")[cellIndex];
                cellTable.focus();
            }
            return;
        }
    }

    function onKeyDownInput(ev) {
        if (ev.key === "Enter") {
            ev.returnValue = false;
            const { nextElementSibling: nextTd } = ev.target.parentElement;
            if (nextTd && nextTd.contentEditable === "true") {
                nextTd.focus();
            } else if (nextTd.querySelector("input")) {
                nextTd.querySelector("input").focus();
            }
        }
    }
</script>

<div class="table-responsive">
    <table
        class="table table-hover table-bordered table-paraderos"
        bind:this={table}
    >
        <thead>
            <tr>
                <th>Instalación</th>
                <th>Secuencia</th>
                <th>Comuna</th>
                <th>Eje</th>
                <th>Cod. Eje</th>
                <th>Desde</th>
                <th>Hasta</th>
                <th>Uso Parada</th>
                <th>Sentido</th>
                <th>Tipo Parada</th>
                <th>Nombre Corredor</th>
                <th>Refugio</th>
                <th>Categoría</th>
                <th>Nombre Parada</th>
                <th>Referencia Urbana</th>
            </tr>
        </thead>
        <tbody>
            {#each data as item}
                <tr>
                    <td
                        contenteditable
                        data-name="instalacion"
                        bind:innerText={item.instalacion}
                        on:keydown={onKeyDownCell}
                    />
                    <td
                        contenteditable
                        data-name="secuencia"
                        bind:innerText={item.secuencia}
                        on:keydown={onKeyDownCell}
                    />
                    <!-- <td contenteditable bind:innerText={item.comuna} on:keydown={onKeyDownCell}></td> -->
                    <td
                        ><input
                            type="text"
                            list="ex1"
                            class="form-select"
                            on:keydown={onKeyDownInput}
                        /></td
                    >
                    <td
                        contenteditable
                        bind:innerText={item.eje}
                        on:keydown={onKeyDownCell}
                    />
                    <td
                        contenteditable
                        bind:innerText={item.codigo_eje}
                        on:keydown={onKeyDownCell}
                    />
                    <td
                        contenteditable
                        bind:innerText={item.desde}
                        on:keydown={onKeyDownCell}
                    />
                    <td
                        contenteditable
                        bind:innerText={item.hasta}
                        on:keydown={onKeyDownCell}
                    />
                    <td
                        contenteditable
                        bind:innerText={item.uso_parada}
                        on:keydown={onKeyDownCell}
                    />
                    <td
                        contenteditable
                        bind:innerText={item.sentido}
                        on:keydown={onKeyDownCell}
                    />
                    <td
                        contenteditable
                        bind:innerText={item.tipo_parada}
                        on:keydown={onKeyDownCell}
                    />
                    <td
                        contenteditable
                        bind:innerText={item.nombre_corredor}
                        on:keydown={onKeyDownCell}
                    />
                    <td
                        contenteditable
                        bind:innerText={item.refugio}
                        on:keydown={onKeyDownCell}
                    />
                    <td
                        contenteditable
                        bind:innerText={item.categoria}
                        on:keydown={onKeyDownCell}
                    />
                    <td
                        contenteditable
                        bind:innerText={item.nombre_parada}
                        on:keydown={onKeyDownCell}
                    />
                    <td
                        contenteditable
                        bind:innerText={item.referencia_urbana}
                        on:keydown={onKeyDownCell}
                    />
                </tr>
            {/each}
        </tbody>
    </table>
</div>
