<template>
    <div v-if="artifact" class="content-xl">
        <h1>Artifact</h1>
        <div class="col-2">
            <div class="tile-m content-s">
                <h3>Group</h3>
                <p>{{ artifact.groupId }}</p>
            </div>
            <div class="tile-m content-s">
                <h3>Artifact</h3>
                <p>{{ artifact.artifactId }}</p>
            </div>
        </div>
        <div class="artifact-page">
            <VersionComponent :artifact="artifact" :version="selectedVersion" v-if="selectedVersion"></VersionComponent>
            <div class="content-m">
                <h2>Versions</h2>
                <p class="tile-m pointer" v-for="version in artifact.versions" :class="{ active: (selectedVersion != null && version.id === selectedVersion.id) }" @click="() => { selectedVersion = version }">{{ version.version }}</p>
            </div>
        </div>
        <div class="content-m">
            <h2>Danger Zone</h2>
            <div class="left-center">
                <UiButton @click="del" class="delete">Delete Artifact</UiButton>
                <UiButton class="delete" v-if="selectedVersion">Delete Version ({{selectedVersion.version}})</UiButton>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {Artifact, Version} from "~/components/artifact/Artifact";
import Codebox from "~/components/artifact/Codebox.vue";
import {Download} from "~/utils/Download";
const artifact: Ref<Artifact | undefined> = ref(undefined);
const selectedVersion: Ref<Version | undefined> = ref(undefined);

onMounted(() => {
    const id = useRoute().params.id as string;
    Artifact.getById(id, (_artifact: Artifact) => {
        artifact.value = _artifact;
        selectedVersion.value = _artifact.versions.at(0);
    })
})

function del()
{
    const id = useRoute().params.id as string;
    Artifact.deleteById(id, () => {
        useRouter().push("/artifacts");
    })
}
</script>

<style scoped>
.artifact-page {
    display: grid;
    grid-template-columns: 1fr 10rem;
    gap: 1rem;
}
.active {
    background-color: #3c74ff;
    color: white;
    border: none;
}
.delete {
    background-color: var(--danger-color);
}
</style>