<script lang="ts">
  import type { ChangeEventHandler } from "svelte/elements"

  let imagePreviewUrl: string | undefined = undefined
  let quote: string = '挂科比不挂科南'
  let author: string = '宿舍'

  const handleFileChange: ChangeEventHandler<HTMLInputElement> = (event) => {
    const files = (event.target!! as HTMLInputElement).files
    if (files && files.length == 1) {
      const file = files[0]
      imagePreviewUrl = URL.createObjectURL(file)
    } else {
      imagePreviewUrl = undefined
    }
  }
</script>

<header>
  <h1 class="text-2xl font-bold">Makequote</h1>
  <p>一个生成奇奇怪怪的名人名言句子的服务</p>
  <p>
    <label for="image">选择文件：</label>
    <input
      type="file"
      id="image"
      name="image"
      accept="image/*"
      class="border cursor-pointer shadow"
      required
      on:change={handleFileChange}
    />
  </p>
  <p>
    <label for="quote">名言：</label>
    <input type="text" id="quote" name="quote" bind:value={quote} />
  </p>
  <p>
    <label for="author">名人：</label>
    <input type="text" id="author" name="author" bind:value={author} />
  </p>
</header>

<div id="main" class="w-240 h-135 relative bg-green-400 m-20 shadow text-white" style="font-family: 'Noto Sans CJK SC';">
  {#if imagePreviewUrl}
    <div class="absolute left-0 top-0 h-full w-130 bg-center bg-cover grayscale" style:background-image={`url(${imagePreviewUrl})`}></div>
  {/if}
  <div class="absolute right-0 top-0 h-full w-180" style="background: linear-gradient(0.25turn, #00000000, #000000 38.89%)">
    <div class="box-border ml-70 w-110 h-full flex justify-center items-center px-10">
      <div class="w-full">
        <h1 class="text-center text-4xl font-bold my-5 wrap-break-word">{quote}</h1>
        <p class="text-right">– {author}</p>
      </div>
    </div>
  </div>
</div>

