<script lang='ts'>
  import { onMount } from 'svelte';
  import { authStore } from '../stores/authstore';
  import { dossierData, fetchPatientDossier, loading, error, fetchStatusDownloadsInProgress, dossierDataDownloadsInProgress, resetDownloads } from '../stores/dossierstore';
  import ResourcesChart from '../components/ResourcesChartComponent.svelte';
  import pdfIcon from '../assets/pdf-icon.png';
    import { navigate } from 'svelte-routing';



  $: dossier = $dossierData;
  $: downloadsInProgress = $dossierDataDownloadsInProgress;

  onMount(() => {
    fetchPatientDossier();

    const fetchIntervalStatusProgress = setInterval(() => {
      fetchStatusDownloadsInProgress();
    }, 5000);

    return () => clearInterval(fetchIntervalStatusProgress);
  });
 
</script>

<main>
  {#if $authStore.loggedIn}
    <h2>Patiëntdossier</h2>
    <p>De volgende informatie is verzameld in je medisch patiëntdossier.</p>    

    <div class="row">
      <div class="column">
        <h3>Verzamelde documenten</h3>

        {#if downloadsInProgress > 0}
          <p>We halen documenten voor je op. Deze zijn snel beschikbaar.</p>
        {/if}

        {#if dossier.documentReferences && dossier.documentReferences.length > 0}
          {#each dossier.documentReferences as reference}
          <div class="document">
            <img src={pdfIcon} alt="pdf-icon" />
            <p><b>{reference.title || 'Document'}</b><br/>Bron: {reference.source}</p>
          </div>
          {/each}
        {:else}
          <p>Je hebt nog geen documenten verzameld in je patiëntendossier.</p>
        {/if}
        <button class="action" on:click={resetDownloads}>Verwijder documenten</button>

      </div>
      <div class="column">
        <h3>Verzamelde gegevens</h3>
        <p>Deze informatie is verzameld in je patiëntdossier.</p>
        <div class="center">
          <ResourcesChart />
        </div>
      </div>
    </div>

    


    

  {/if}
</main>

<style lang="scss">

  .center {
    display: flex;
    justify-content: center;
  }
  .row {
    display: flex;
    gap: 20px;

    .column {
      flex: 1;
      padding: 20px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      background-color: #f9f9f9;
    }
  }  

  .document {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin-bottom: 10px;

    img {
      width: 24px;
    }

    p {
      font-size: 1rem;
      color: #333;
    }
  }

</style>