<script lang="ts">
  import { onMount } from 'svelte';
  import JSZip from 'jszip';

  let fileInput: HTMLInputElement | null = null;

  const handleFileUpload = async () => {
    if (!fileInput || !fileInput.files || fileInput.files.length === 0) return;

    const file = fileInput.files[0];
    const reader = new FileReader();

    reader.onload = async (event) => {
      const zip = await JSZip.loadAsync((event.target as FileReader).result as ArrayBuffer);
      const newZip = new JSZip();

      for (const relativePath in zip.files) {
        const zipEntry = zip.files[relativePath];

        if (zipEntry.dir) {
          newZip.folder(relativePath);
        } else if (relativePath.endsWith('.xhtml') || relativePath.endsWith('.html')) {
          newZip.file(relativePath, applyBionicReadingToHTML(await zipEntry.async('text')));
        } else {
          newZip.file(relativePath, await zipEntry.async('arraybuffer'));
        }
      }

      downloadEPUB(
        await newZip.generateAsync({ type: 'blob' }),
        `${file.name.split('.epub')[0]}_hayai.epub`
      );
    };

    reader.readAsArrayBuffer(file);
  };

  const applyBionicReadingToHTML = (content: string) => {
    const contentParser = new DOMParser().parseFromString(content, 'text/html');

    for (const paragraph of contentParser.getElementsByTagName('p'))
      paragraph.innerHTML = applyBionicReadingToString(paragraph.textContent ?? '');

    return contentParser.documentElement.outerHTML;
  };

  const applyBionicReadingToString = (text: string) =>
    text
      .split(/\s+/)
      .map((word) => {
        if (/^\W+$/.test(word) || word.length <= 2) return word;

        let boldLength;

        if (word.length <= 4) {
          boldLength = 2;
        } else if (word.length <= 7) {
          boldLength = 3;
        } else if (word.length <= 10) {
          boldLength = 4;
        } else {
          boldLength = Math.ceil(word.length * 0.5);
        }

        return `<strong>${word.slice(0, boldLength)}</strong>${word.slice(boldLength)}`;
      })
      .join(' ');

  const downloadEPUB = (blob: Blob | MediaSource, fileName: string) => {
    const link = document.createElement('a');

    link.href = URL.createObjectURL(blob);
    link.download = fileName;

    link.click();
    URL.revokeObjectURL(link.href);
  };

  onMount(() => (fileInput = document.getElementById('epub-file') as HTMLInputElement));
</script>

<div class="card">
  {@html applyBionicReadingToString('Upload an EPUB; receive a "bionic" EPUB.')}

  <br />

  <small>
    {@html applyBionicReadingToString(
      "Bionic reading is a method of displaying text that aims to enhance readability and reading speed by guiding the reader's eyes using artificial fixation points."
    )}
  </small>

  <p />

  {@html applyBionicReadingToString(
    `After selecting an EPUB file, 早い will apply a bionic reading filter over any and all words, and return the newly created "bionic" EPUB file.`
  )}

  <p />

  <input type="file" id="epub-file" accept=".epub" on:change={handleFileUpload} />
</div>
