---
import '@/styles/globals.css';
import Layout from '../layouts/Layout.astro';
import { Button } from '@/components/ui/button';

import '../styles/locked-page.css';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
---

<Layout>
  <main>
    <form
      class="flex flex-col gap-8"
      id="sample-form"
      enctype="multipart/form-data"
    >
      <div>
        <h1
          class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
        >
          Konulu Konum
        </h1>
        <p class="leading-7 [&:not(:first-child)]:mt-6">
          3 basit adımda fotoğraflarınızı ve videolarınızı <b
            >yalnızca belirli bir konumda</b
          > açılacak şekilde kilitleyin:
        </p>
      </div>

      <div>
        <h2
          class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
        >
          1. Fotoğraf Seçimi
        </h2>
        <p class="leading-7 [&:not(:first-child)]:mt-6">
          Aşağıdaki butona basıp galerinizden bir fotoğraf seçin, seçtiğiniz
          fotoğraf yalnızca belirli bir konumda açılabilecek bir hale
          getirilecek.
        </p>
        <div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
          <Input type="file" name="selected-photo" id="photo-selector" />
          <p class="text-sm text-muted-foreground">
            Galerinizden bir fotoğraf seçin.
          </p>
        </div>
      </div>

      <div>
        <h2
          class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
        >
          2. Fotoğrafın Açılacağı Konum
        </h2>
        <p class="leading-7 [&:not(:first-child)]:mt-6">
          Haritadan bir nokta seçin. Bağlantıyı gönderdiğiniz kişi bu konuma
          gittiği zaman seçtiğiniz fotoğrafı görebilecek.
        </p>
        <div>
          <div id="map" class="w-full h-[450px] rounded mt-4"></div>
          <p class="text-xl mt-2">
            <span class="font-semibold">Seçilen Konum:</span>
          </p>
          <p class="text-lg" id="coordinates">
            Henüz konum seçmediniz, konum seçmek için haritadaki bir noktaya
            basınız.
          </p>
          <p
            class="text-lg text-muted-foreground mt-2"
            id="location-selected-confirmation"
          >
          </p>
        </div>
      </div>

      <div>
        <h2
          class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
        >
          3. Fotoğraf Açıklaması
        </h2>
        <div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
          <Textarea placeholder="Açıklamanızı buraya yazınız." name="desc" />
          <p class="text-sm text-muted-foreground">
            Bir açıklama girin, yüklediğiniz içeriğin üzerine bu metin
            görünecek.
          </p>
        </div>
      </div>

      <Button className="w-full" type="submit" id="submit-button">
        Bağlantıyı Oluştur
      </Button>
    </form>
  </main>
  <script src="../scripts/initSelectionMap.js"></script>
</Layout>

<script>
  import type { PutBlobResult } from '@vercel/blob';

  const handleSubmit = async (e: SubmitEvent) => {
    e.preventDefault();

    const formData = new FormData(e.target as HTMLFormElement);

    const response = await fetch(`/create-url`, {
      method: 'POST',
      body: formData,
    });

    const newBlob = (await response.json()) as PutBlobResult;

    console.log(newBlob);
  };

  document.getElementById('sample-form')!.onsubmit = handleSubmit;
</script>