<script>
  import { t } from '$lib/translations';

  import CardList from '$lib/components/CardList.svelte';
  import Dropzone from '$lib/components/Dropzone.svelte';
  import FileList from '$lib/components/FileList.svelte';
  import Seo from '$lib/components/Seo.svelte';

  import { filterFiles } from '$lib/utils/filterFiles';
  import { supportedFormats } from '$lib/format-readers';

  /**
   * @type {File[]}
   */
  let acceptedFiles = $state([]);
  /**
   * @type {File[]}
   */
  let rejectedFiles = $state([]);
  let areAcceptedFilesRendered = $state(false);

  const fileRequirements = {
    supportedFormats: Object.values(supportedFormats).map((f) => f.ext),
    maxSize: 1000000,
  };

  /**
   * Update the flag that indicates that the files were rendered.
   *
   * @param {SubmitEvent} e
   */
  function onSubmit(e) {
    e.preventDefault();
    e.stopPropagation();
    areAcceptedFilesRendered = true;
  }

  /**
   * @param {DragEvent} evt
   */
  function onDrop(evt) {
    onChange(evt);
  }

  /**
   * @param {Event | DragEvent} evt
   */
  function onChange(evt) {
    acceptedFiles = [];
    rejectedFiles = [];
    areAcceptedFilesRendered = false;

    const changedFiles =
      'dataTransfer' in evt && evt.dataTransfer
        ? evt.dataTransfer.files
        : evt.target?.files;

    if (!changedFiles) return;

    const results = filterFiles(changedFiles, fileRequirements);
    acceptedFiles = results.accepted;
    rejectedFiles = results.rejected;
  }

  function onClick() {
    const el = document.getElementById('file-input');
    if (el) el.click();
  }

  /**
   * @param {KeyboardEvent} evt
   */
  function onKeydown(evt) {
    if (evt.key === 'Enter') {
      const el = document.getElementById('file-input');
      if (el) el.click();
    }
  }

  /** @type {import('./$types').PageProps} */
  let { data } = $props();

  const metadata = data.metadata;
</script>

<Seo {...metadata} />

<form id="form" enctype="multipart/form-data" onsubmit={onSubmit}>
  <div class="title-container">
    <h2>{$t('viewer.title')}</h2>
  </div>

  <p>
    {@html $t('viewer.fileSize', {
      fileSize: fileRequirements.maxSize / 1_000_000,
    })}
    {@html $t('viewer.supportedFormats', {
      supportedFormats: fileRequirements.supportedFormats.join(', '),
    })}
  </p>

  <Dropzone
    files={acceptedFiles}
    supportedFormats={fileRequirements.supportedFormats}
    {onKeydown}
    {onClick}
    {onDrop}
    {onChange}
  />

  <input id="submit" type="submit" value={$t('viewer.render')} />

  <p class="disclaimer">
    <em>{$t('viewer.warning.copyright')}</em>
  </p>
</form>

{#if areAcceptedFilesRendered}
  <CardList files={acceptedFiles} />
{:else}
  <FileList title={$t('viewer.selected')} files={acceptedFiles} />
  <FileList title={$t('viewer.rejected')} files={rejectedFiles} isError />
{/if}

<style>
  form {
    width: fit-content;
    margin: 0 auto;
  }

  .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #submit {
    border: none;
    border-radius: 10px;
    padding: 15px;
  }

  .disclaimer {
    font-size: 13px;
    text-align: center;
  }

  @media only screen and (max-device-width: 768px) {
    #form {
      width: 100%;
    }
  }
</style>
