<script lang="ts">
    import { base } from "../stores/basestore";
    import { providersApd, providersZa, type StelselNodeProvider } from "../stores/providerstore";
    
    
    let providerSelected = ''; // $ = $providersApd[0]?.name || '';
  
  const redirectToImportFromProviderSelected = () => {
    // Start remote authorization and consent flow by redirecting user to the remote authorization endpoint.
    // After import and processing, the user returns at return-url /bekijken or /bekijken/annuleren.
    window.location.href = `${$base}/api/import/login/${providerSelected}`; // Alternatively, ?returnUrl=${$base}${PATHS.BEKIJKEN}
  };
  
</script>
  
<div class="row">

    <div class="column">
        <h4>Ophalen bij een zorgaanbieder</h4>
        <p>Je huisartsenpraktijk, ziekenhuis en zorginstelling hebben de meest recente zorginformatie beschikbaar.</p>
        <select>
        <option>Huisartsenpraktijk Stilwert</option>
        <option>Ziekenhuis Stilwert</option>
        <option>Zorgaanbieder ABC</option>
        <option>Zorgaanbieder DEF</option>
        <option>Zorgaanbieder GHI</option>
        <option>Zorgaanbieder JKL</option>
        <option>Zorgaanbieder MNO</option>
        <option>Zorgaanbieder PQR</option>
        <option>Zorgaanbieder STU</option>
        <option>Zorgaanbieder VWS</option>
        <option>Zorgaanbieder XYZ</option>
        {#each $providersZa as provider}
            <option value={provider.name}>{provider.displayName}</option>
        {/each}
        </select>
        <button class="disabled">Ophalen bij zorgaanbieder</button>
    </div>

    <div class="column">
        <h4>Ophalen bij een ander PGO</h4>
        <p>Je persoonlijke gezondheidsomgeving bewaart over meerdere jaren jouw verzamelde zorginformatie.</p>
        <select bind:value={providerSelected}>
        {#each $providersApd as provider}
            <option value={provider.name}>{provider.displayName}</option>
        {/each}
        </select>
        <button class="action" on:click={redirectToImportFromProviderSelected}>Ophalen bij PGO</button>
    </div>
    
</div>
  
<style lang="scss">
    .row {
        display: flex;
        margin-top: 2rem;
        gap: 1rem;

        .column {
        flex: 1;
        padding: 1rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #f9f9f9;
        }
    }

    select {
        width: 100%;
        padding: 0.5rem;
        margin-bottom: 1rem;
    }
</style>