<script lang='ts'>
    import { get } from 'svelte/store';
    import { base } from '../stores/basestore';
    import { authStore, fetchIsUserLoggedIn } from '../stores/authstore';
    import { dossierData, fetchPatientResources, type Dossier } from '../stores/dossierstore';
    import { onMount } from 'svelte';
    import logo from '../assets/logo.png';
  
    $: dossier = $dossierData || {} as Dossier;

    onMount(async () => {
      await fetchIsUserLoggedIn();
      fetchPatientResources();
    });

    function download() {
        const baseUrl = get(base);
        fetch(`${baseUrl}/api/resources/downloaden_als_pdf`, {
          method: 'GET',
          headers: { 'Content-Type': 'application/pdf' },
        })
        .then((response) => {
          if (!response.ok) throw new Error('Failed to download PDF');
          return response.blob();
        })
        .then((blob) => {
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = 'overzicht.pdf';
          document.body.appendChild(a);
          a.click();
          a.remove();
          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          console.error('Error downloading PDF:', error);
          alert('Een fout ontstond bij het downloaden van het PDF-bestand.');
        });
    }
 </script>

 <main>
  <div class="no-screen yes-print">
    <img src={logo} alt="Logo" />
    <hr />
  </div>
  <h3>Overzicht medische informatie</h3>

  <p>Beste {$authStore.username}, dit zijn de gegevens die we voor jou hebben verzameld in je levensloopdossier. Het is een voorbeeld als proof-of-concept bij uitwisselen van documenten tussen PGO's over een koppelvlak.</p>
  <p class="no-print">Je mag de informatie als een PDF-document downloaden. Wist je dat je een ander PGO ook de opdracht mag geven om informatie over te nemen? We sturen dan een kopietje van deze informatie als PDF-document zodat je het daar ook altijd tot je beschikking hebt.</p>
  <p class="no-print"><button on:click={download}>Overzicht downloaden</button><br /></p>

  
  <h4>Patiëntpersoonsgegevens</h4>
  <p>Je ziet hier meerdere contactgegevens staan, dit komt omdat je bij verschillende zorgaanbieders anders bent geregistreerd. We voegen informatie samen tot een geheel.</p>
  <!-- 
  {#each dossier.patients as patient}
    <div class="details">
      <div><strong>Bron:</strong> <span>{patient.source}</span></div>
      <div><strong>Naam:</strong> <span>{patient.name}</span></div>
    </div>
  {/each}, enz -->
  
  <div class="details">
    <div><strong>Bron:</strong> <span>Ziekenhuis Stitswerd</span></div>
    <div><strong>Naam:</strong> <span>Ellen XXX_Baltus</span></div>
    <div><strong>Geslacht:</strong> <span>vrouw</span></div>
    <div><strong>Geboortedatum:</strong> <span>02-08-1974</span></div>
    <div><strong>Adres:</strong> <span>Akkemaweg 423</span></div>
    <div><strong>Postcode:</strong> <span>9999XL</span></div>
    <div><strong>Stad:</strong> <span>Stitswerd</span></div>      
    <div><strong>Telefoon:</strong> <span>-</span></div>
    <div><strong>Land:</strong> <span>Nederland</span></div>
  </div>

  <div class="details">
    <div><strong>Bron:</strong> <span>Huisarts Dr. Snijder</span></div>
    <div><strong>Naam:</strong> <span>Ellen Tini van Beek-Baltus</span></div>
    <div><strong>Geslacht:</strong> <span>vrouw</span></div>
    <div><strong>Geboortedatum:</strong> <span>02-08-1974</span></div>
    <div><strong>Adres:</strong> <span>Piet Heinkade 1001</span></div>
    <div><strong>Postcode:</strong> <span>9999XA</span></div>
    <div><strong>Stad:</strong> <span>Stitswerd</span></div>      
    <div><strong>Telefoon:</strong> <span>+31 6 1234 5656</span></div>
    <div><strong>Land:</strong> <span>Nederland</span></div>
  </div>

  <h4>Overzicht vaccinaties</h4>
  <div class="dossier-table">
      <div class="table-header">
          <div class="table-cell">Vaccinatie</div>
          <div class="table-cell">Vorm</div>
          <div class="table-cell">Dosis</div>
          <div class="table-cell">Datum</div>
      </div>
      <div class="table-row">
        <div class="table-cell">COVID-19 VACCIN MODERNA INJVLST 0,25ML</div>
        <div class="table-cell">DISPERSIE VOOR INJECTIE. Batchnummer: 216036BS</div>
        <div class="table-cell">0.25</div>
        <div class="table-cell">21 december 2021</div>
    </div>
  </div>

  <h4>Overzicht medicatie</h4>
  <div class="dossier-table">
    <div class="table-header">
        <div class="table-cell">Medicijn</div>
        <div class="table-cell">Actief gebruikt</div>
        <div class="table-cell">Gebruiksperiode</div>
        <div class="table-cell">Voorgeschreven door</div>
        <div class="table-cell">Reden voorschrijven</div>
        <div class="table-cell">Gebruiksinstructie</div>
    </div>
    <div class="table-row">
      <div class="table-cell">METHOTREXAAT TABLET 2,5MG</div>
      <div class="table-cell">Ja, gebruikt nu</div>
      <div class="table-cell">26 maart, gedurende 28 dagen</div>
      <div class="table-cell">Medisch specialist Hans van Doorn, Ons Dorp</div>
      <div class="table-cell">Andere maligniteit bloed/lymfestelsel</div>
      <div class="table-cell">Oraal, 1 maal per week 5 stuks gedurende 28 dagen</div>
    </div>
    <div class="table-row">
      <div class="table-cell">FENETICILLINE CAPSULE 500MG</div>
      <div class="table-cell">Ja, gebruikt nu</div>
      <div class="table-cell">21 maart, gedurende 10 dagen</div>
      <div class="table-cell">Peter van Pulver. Huisartsenpraktijk Pulver & Partners, Ons Dorp</div>
      <div class="table-cell">In overleg met specialist. Bewust hoge dosering</div>
      <div class="table-cell">Oraal, gedurende 10 dagen, 3 maal per dag 1 stuk.</div>
    </div>
  </div>

  <h4>Organisaties</h4>
  {#if dossier.organizations?.length > 0}
    {#each dossier.organizations as organization}
      <div class="details">
        <div><strong>Bron:</strong> <span>{organization.name}</span></div>
        <div><strong>Naam:</strong> <span>{organization.name}</span></div>
      </div>
    {/each}
  {/if}

  <p>Enzovoort. Dit is een eenvoudig voorbeeld als proof-of-concept bij PGO-koppelvlak.</p>
</main>
  
<style lang="scss">

  main {
    margin: 0 auto;
    padding: 2em;
  }

  hr {
    border: 0;
    border-bottom: 2px solid lightblue;
  }

  .details {
    margin-bottom: 1em;
    border: 1px solid #ccc;
    

    strong {
      display: inline-block;
      width: 10em;
      padding: 0.5em;
      font-weight: normal;
      background-color: #f0f0f0;
      border-right: 1px solid #ccc;
    }

    span {
      padding: 0.5em;
    }
  }

  .dossier-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
  }

  .table-header, .table-row {
    display: table-row;
  }

  .table-cell {
    display: table-cell;
    padding: 0.5em;
    border: 1px solid #ccc;
  }

  .table-header .table-cell {
    font-weight: bold;
    background-color: #f0f0f0;
  }

  button {
    cursor: pointer;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    border: 1px double lightblue;
    border-radius: 1px;
    background: none;
    color: #33a0d9;
    transition:
      background-color 0.3s,
      color 0.3s;

    &:hover {
      background-color: lightblue;
      color: #128bcc;
    }
  }

</style>