<script lang="ts">
    import PisStartEndCard from '$lib/components/ui/cards/pis/PisStartEndCard.svelte';
    import PisCode from '$lib/components/ui/cards/pis/PisCode.svelte';
    import Button from '$lib/components/ui/Button.svelte';
    import type { PisObjects } from '@owlboard/api-schema-types';

    let results = $state<PisObjects[]>([]);
    let resultsLoaded = $state<boolean>(false);

    function handleStartEndSearch(start: string, end: string) {
        console.log(`PIS Search: ${start}-${end}`);
        // Fetch API Results Here
        resultsLoaded = true;
    }

    function handleCodeSearch(code: string) {
        console.log(`PIS Search: ${code}`);
        // Fetch API Results Here
        resultsLoaded = true;
    }

    function clearResults() {
        console.log('Clearing Results');
        resultsLoaded = false;
        results = [];
    }
</script>

{#if !resultsLoaded}
    <div class="card-container">
        <PisStartEndCard onsearch={handleStartEndSearch} />
        <PisCode onsearch={handleCodeSearch} />
    </div>
{:else}
    <div class="result-container">
        {#if !results.length}
            <p class="no-results">No results found</p>
        {:else}
            <p class="no-results">Unable to load results</p>
        {/if}
        <Button onclick={clearResults}>Reset</Button>
    </div>
{/if}

<style>
	.card-container {
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: 20px;
		justify-content: center;
		padding: 20px 10px;
	}

    .result-container {
        font-family: 'URW Gothic', sans-serif;
        font-size: 1.2rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        background: var(--color-accent);
        border-radius: 15px;
        padding: 0 0 20px 0;
        margin: auto;
        margin-top: 25px;
        width: 90%;
        max-width: 1000px;
		box-shadow: var(--shadow-std);
    }
</style>