<script>
    import Header from "$lib/navigation/header.svelte";
    import Loading from "$lib/navigation/loading.svelte";
    import Nav from "$lib/navigation/nav.svelte";
    import { getApiUrl } from "$lib/scripts/upstream";
    const title = "Location Codes";

    let val = {
        crs: "",
        tiploc: "",
        stanox: "",
        nlc: "",
        name: "",
        uic: "",
    };

    let isLoading = false;

    async function getData(type = "", value = "") {
        const url = `${getApiUrl()}/api/v2/ref/locationCode/${type}/${value}`;
        const res = await fetch(url);
        const data = await res.json();
        isLoading = false;
        return data;
    }

    async function processData(data) {
        //console.log("data",JSON.stringify(data))
        if (data.ERROR == "Offline") {
            return;
        }
        val = {
            crs: data[0]["3ALPHA"] || "None",
            tiploc: data[0]["TIPLOC"] || "None",
            stanox: data[0]["STANOX"] || "None",
            nlc: data[0]["NLC"] || "None",
            name: data[0]["NLCDESC"] || "None",
            uic: data[0]["UIC"] || "None",
        };
        //console.log("val",JSON.stringify(val));
    }

    async function submit() {
        isLoading = true;
        let data = [];
        if (val?.crs) {
            data = await getData("crs", val.crs);
        } else if (val?.tiploc) {
            data = await getData("tiploc", val.tiploc);
        } else if (val?.stanox) {
            data = await getData("stanox", val.stanox);
        } else if (val?.nlc) {
            data = await getData("nlc", val.nlc);
        } else {
            return;
        }
        processData(data);
    }

    async function reset() {
        val = {
            crs: "",
            tiploc: "",
            stanox: "",
            nlc: "",
            name: "",
            uic: "",
        };
    }
</script>

<Header {title} />

{#if isLoading}
    <Loading />
{/if}

<p>Enter one of the codes below and press submit.</p>
<p>OwlBoard doesn't currently support searching by name or UIC.</p>
<p class="desc">Some locations only have some applicable location codes.</p>

<div class="inputs">
    <form on:submit={submit}>
        <input type="text" readonly placeholder="Name" bind:value={val.name} />
        <br />
        <input type="text" maxlength="3" autocomplete="off" placeholder="CRS/3ALPHA" bind:value={val.crs} />
        <br />
        <input type="text" maxlength="7" autocomplete="off" placeholder="TIPLOC" bind:value={val.tiploc} />
        <br />
        <input type="text" maxlength="10" autocomplete="off" placeholder="STANOX" bind:value={val.stanox} />
        <br />
        <input type="number" maxlength="6" min="0" autocomplete="off" placeholder="NLC" bind:value={val.nlc} />
        <br />
        <input type="text" readonly autocomplete="off" placeholder="UIC" bind:value={val.uic} />
        <br />
        <button type="submit">Submit</button>
        <button type="reset" on:click={reset}>Reset</button>
    </form>
</div>

<Nav />

<style>
    p {
        margin: 10px;
    }
    input {
        font-family: urwgothic, sans-serif;
        border-radius: 50px;
        border: none;
        width: 60%;
        max-width: 200px;
        min-width: 130px;
        height: 30px;
        margin-bottom: 10px;
        text-transform: uppercase;
        box-shadow: var(--box-shadow);
    }
    button {
        border-radius: 50px;
        font-family: urwgothic, sans-serif;
        background-color: var(--island-bg-color);
        border: none;
        color: white;
        height: 30px;
        width: 20%;
        max-width: 100px;
        min-width: 75px;
        font-size: 18px;
        box-shadow: var(--box-shadow);
    }
    .desc {
        color: white;
    }
    input {
        text-align: center;
    }
</style>
