<script lang="ts">
    import Navbar from "$lib/components/Navbar.svelte";
    import crossUrl from "$lib/assets/cross.svg";
    import type { Table } from "$lib";
    const { data } = $props();
    const { reports, supabase } = $derived(data);
    import { invalidate } from "$app/navigation";

    let deleting = $state(false);

    async function deleteReport(report: Table<"reports">) {
        const { error: reportDeleteError } = await supabase
            .from("reports")
            .delete()
            .eq("id", report.id);

        if (reportDeleteError)
            return alert(`Error submitting report: ${reportDeleteError.message}`);
        else alert("Report deleted successfully!");
    }
</script>

<Navbar>
    <a href="/">
        <img src={crossUrl} alt="close" />
    </a>
</Navbar>

<main>
    {#each reports as report (report.id)}
        <div class="reportContainer">
            <button
                type="button"
                class="deleteReport"
                aria-label="delete"
                disabled={deleting}
                onclick={async () => {
                    deleting = true;
                    await deleteReport(report);
                    await invalidate("db:reports");
                    deleting = false;
                }}><img src={crossUrl} alt="delete" /></button
            >
            <h1 class="submitHeader">
                {report.study_spaces?.location ?? "Study space doesn't exist"}
            </h1>
            <span class="tag">
                {report.type}
            </span>
            <p class="content">{report.content}</p>

            <a href="/space/{report.study_space_id}" class="viewPage">View Space</a>
        </div>
    {/each}
</main>

<style>
    main {
        display: flex;
        gap: 1rem;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
        padding: 5rem 0 1rem 0;
        max-width: 100%;
        margin: 0 auto;
        height: 200vh;
    }

    .tag {
        display: flex;
        align-items: center;
        border-radius: 0.25rem;
        background-color: #2e4653;
        color: #eaffeb;
        font-size: 1.1rem;
        cursor: pointer;
        padding: 0.2rem 0.6rem;
        width: fit-content;
    }

    .reportContainer {
        display: flex;
        flex-direction: column;
        width: 90%;
        gap: 0.5rem;
        padding: 1rem;
        background-color: #182125;
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
        color: #eaffeb;
        position: relative;
        translate: 0 -3.5rem;
        border: 2px solid #eaffeb;
    }

    .viewPage {
        width: 100%;
        padding: 0.5rem;
        border-radius: 0.5rem;
        border: none;
        background-color: #49bd85;
        color: #ffffff;
        font-size: 1rem;
        cursor: pointer;
        margin-top: 1rem;
        text-align: center;
        text-decoration: none;
    }

    .deleteReport {
        position: absolute;
        top: 0.1rem;
        right: 0.1rem;
        background: none;
        border: none;
        cursor: pointer;
    }
</style>
