<script>
  import offLogo from './assets/icons/off-logo.svg';
  import BarcodeIcon from './assets/icons/barcode.svg';
  import svelteIcon from './assets/icons/svelte.svg';
  import OFF from './lib/OFF.svelte';
  import Scanner from './lib/Scanner.svelte';
  import Card from './lib/Card.svelte';
  import SW from './lib/SW.svelte';

  import { onMount } from 'svelte';

  let showScanner = false;
  let showCard = false;
  let barcode = '';

  function startScanner() {
    showScanner = true;
  }

  function stopScanner() {
    showScanner = false;
  }

  function scannerResult(result) {
    barcode = result;
    showCard = true;
  }
</script>

<div class="content flex flex-col grow">
  <header>
    <div>
      <a href="/">
        <img src={offLogo} class="logo" alt="Open Food Facts Logo" />
      </a>
    </div>
    <h1>OpenFoodFacts Client</h1>
  </header>
  <main class="placeholder">
    <div id="card" />

    <div class="reader">
      {#if showScanner}
        <Scanner onClose={stopScanner} onResult={scannerResult} />
      {/if}
    </div>

    <div class="product">
      {#if showCard}
        <Card {barcode} />
      {/if}
    </div>
  </main>
  <nav class="menu bottom nav-bar">
    <ul>
      <li>
        <button
          class="nav-item"
          title="Scan barcode"
          on:click={() => (showScanner = true)}
        >
          <img class="monochrome icon" src={BarcodeIcon} alt="Barcode icon" />
        </button>
      </li>
    </ul>
  </nav>
</div>
<footer class="flex flex-row align-between">
  <p>
    <span class="copyleft">🄯</span>
    2022 - <a href="https://samuel.ortion.fr/">Samulus.i.n</a>.
  </p>
  <p>
    Made with &hearts; and
    <a href="https://svelte.dev">
      <img class="svelte icon" src={svelteIcon} alt="Svelte.js icon" />
    </a>.
    <a
      href="https://forge.chapril.org/UncleSamulus/openfoodfacts-client/"
      title="OpenFoodFacts Client source code">View source</a
    >.
  </p>
  <p>
    Based on data from <a href="https://openfoodfacts.org/">OpenFoodFacts</a>.
  </p>
</footer>

<style>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #ff3e00aa);
  }

  .menu .icon {
    height: 5rem;
    width: 5rem;
  }

  .menu li {
    list-style: none;
  }

  @media (prefers-color-scheme: dark) {
    .monochrome {
      filter: invert(1);
    }
  }
  .svelte.icon {
    height: 1em;
    width: 1em;
  }

  .placeholder {
    min-height: 25vh;
  }
</style>
