<script>
    import Modal from "../../components/Modal.svelte";

    import { createEventDispatcher } from "svelte";
    import { getLetreroLUR } from "../../services/letreros_lur";
    import IconLoading from "../../components/IconLoading.svelte";
    const dispatch = createEventDispatcher();

    export let codigo = null;

    let letrero = {};
    let codigo_dividido = []
    let loading = false

    $: fetchLetreroLUR(codigo)

    async function fetchLetreroLUR(codigo) {
        try {
            loading = true
            letrero = await getLetreroLUR(codigo) || {}
            codigo_dividido = letrero.codigo.match(/\d+|[a-z]+/gi)
        } catch (error) {
            console.log({ error })
        } finally {
            loading = false;
        }
    }

</script>

<Modal title="Letrero" classBody="bg-white" on:close={() => dispatch('close')}>
    {#if loading}
        <IconLoading />
    {/if}
    
    {#if !loading && letrero.codigo}
        <table class="m-auto border border-secondary" cellpadding="10" cellspacing="0"
            style="--bgcolor1: {letrero.bgcolor1}; --color1: {letrero.color1}; --bgcolor2: {letrero.bgcolor2}; --color2: {letrero.color2}"
        >
            <tbody class="color1">
                <tr>
                    <td rowspan="4" width="80" class="color2 text-center">
                        <h1 class="m-0">{codigo_dividido[0] || ''}</h1>
                        <h1 class="m-0">{codigo_dividido[1] || ''}</h1>
                    </td>
                    <td width="220">{letrero.linea1 || ''}</td>
                </tr>
                <tr>
                    <td>{letrero.linea2 || ''}</td>
                </tr>
                <tr>
                    <td>{letrero.linea3 || ''}</td>
                </tr>
                <tr class="color2">
                    <td>{letrero.linea4 || ''}</td>
                </tr>
            </tbody>
        </table>
    {:else}
        {#if !loading}
            <p class="alert alert-warning p-3">Información del Letrero no registrada.</p>
        {/if}
    {/if}
</Modal>

<style>
    .color1 {
        background-color: var(--bgcolor1);
        color: var(--color1);
    }
    .color2 {
        background-color: var(--bgcolor2);
        color: var(--color2);
    }
</style>