---
import '@/styles/globals.css';
import '../styles/locked-page.css';

import Layout from '../layouts/Layout.astro';
import ShareButton from '../components/ShareButton';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { CalendarIcon } from '@radix-ui/react-icons';
import LockedContent from '@/components/LockedContent';
import { Separator } from '@/components/ui/separator';
import type { ContentTable } from '@/lib/db';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import utc from 'dayjs/plugin/utc';

type Content = Omit<ContentTable, 'url'>;

const { id } = Astro.params;

const res = await fetch(
  `${import.meta.env.PUBLIC_HOME_URL}/api/content?id=${id}`
);

const data: Content | null = res.status === 200 ? await res.json() : null;

dayjs.extend(relativeTime);

dayjs.extend(utc);

// @ts-expect-error Generated<string> is string
const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
---

<Layout>
  <main class="flex flex-col gap-4">
    <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">
        Arkadaşınız size bir fotoğraf ve bir not bıraktı. Fakat fotoğrafı
        görebilmeniz için aşağıdaki konuma gitmeniz gerekiyor. Konuma
        yaklaştığınızda butona basıp fotoğrafı görüntüleyebilirsiniz.
      </p>
    </div>

    <Separator />

    <Card className="w-full">
      <CardHeader>
        <CardTitle>{data?.author}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>{data?.description}</p>
      </CardContent>
      <CardFooter className="gap-2">
        <CalendarIcon />
        <p>{dateFromNow}</p>
      </CardFooter>
    </Card>

    <LockedContent
      contentId={data?.id}
      imageUrl={data?.blob_url}
      location={data?.loc}
      client:load
    />

    <div
      id="map"
      class="w-full h-[450px] rounded"
      data-target-location={data?.loc}
    >
    </div>

    <ShareButton client:only />
    <div class="flex justify-center">
      <p class="text-muted-foreground">
        Fotoğrafın kilidi şu ana dek <b>{data?.unlocked_counter}</b> kez açıldı
      </p>
    </div>
  </main>
  <script src="../scripts/initMap.js"></script>
</Layout>