<script lang="ts">
    import { onMount } from "svelte";
    import Header from "$lib/navigation/header.svelte";
    import Nav from "$lib/navigation/nav.svelte";
    import Loading from "$lib/navigation/loading.svelte";
    import Card from "$lib/cards/Card.svelte";
    import type { CardConfig } from "$lib/cards/Card.types";
    import { apiGet } from "$lib/scripts/apiFetch";

    interface ApiResponse {
        results: boolean;
        title: string;
        resultLines: string[];
    }
    const title = "Reason Codes";
    let isLoading = false;
    let inputValue = "";
    let resultObject: ApiResponse = {
        results: false,
        title: "",
        resultLines: [],
    };
    let config: CardConfig = {
        title: "",
        showHelp: false,
        showRefresh: false,
        helpText: "",
        onRefresh: () => {},
        refreshing: false,
    };

    function load() {
        isLoading = true;
        resultObject.results = false;
        getData().then((result) => {
            handleData(result);
            isLoading = false;
        });
    }

    async function getData() {
        if (inputValue) {
            const apiPath = `/api/v2/ref/reasonCode/${inputValue}`;
            const res = await apiGet(apiPath);
            return res;
        } else {
            return [];
        }
    }

    async function handleData(data) {
        let resultLines = [];
        if (data.length) {
            resultObject.title = data[0]["code"];
            resultLines = [data[0]["lateReason"], data[0]["cancReason"]];
        } else {
            resultObject = {
                results: false,
                title: "Not Found",
                resultLines: [],
            };
        }
        resultObject.resultLines = resultLines;
        config.title = resultObject.title;
        resultObject.results = true;
    }

    onMount(() => {
        isLoading = false;
    });

    function handleInput(event) {
        inputValue = event.target.value;
    }

    function handleSubmit(event) {
        event.preventDefault();
        load();
    }
</script>

<Header {title} />
<p>A reason code is a three digit number that maps to a reason for a delay or cancellation</p>
<form on:submit={handleSubmit}>
    <input type="text" placeholder="Enter Code" autocomplete="off" bind:value={inputValue} on:input={handleInput} />

    <br />

    <button type="submit">Submit</button>
</form>

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

{#if resultObject.results}
    <Card {config}>
        {#each resultObject.resultLines as line}
            <p>{line}</p>
        {/each}
    </Card>
{/if}

<Nav />

<style>
    p {
        margin: 10px;
        margin-top: 20px;
    }
    input {
        width: 25%;
        min-width: 150px;
        height: 32px;
        margin-top: 10px;
        margin-bottom: 5px;
        border-radius: 50px;
        border: none;
        text-align: center;
        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        text-transform: uppercase;
        font-size: 15px;
        box-shadow: var(--box-shadow);
    }
    button {
        width: 15%;
        min-width: 100px;
        margin-bottom: 5px;
        margin-top: 5px;
        border: none;
        border-radius: 20px;
        padding: 5px;
        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        font-size: 16px;
        font-weight: 400;
        background-color: var(--island-bg-color);
        color: var(--main-text-color);
        box-shadow: var(--box-shadow);
    }
</style>
