<template>
    <div v-if="artifact" class="content-l">
        <h1>Artifact</h1>
        <div class="col-2">
            <p class="tile-m">{{ artifact.groupId }}</p>
            <p class="tile-m">{{ artifact.artifactId }}</p>
        </div>
        <div class="artifact-page">
            <div class="content-m" v-if="selectedVersion">
                <h2>Dependency</h2>
                <div class="tile-m" v-if="dependency">
                    <Codebox :content="dependency"></Codebox>
                </div>
                <div class="content-m">
                    <h2>Files</h2>
                    <p class="tile-m" v-if="selectedVersion.jars" v-for="jar in selectedVersion.jars" @click="Download.download(jar.url)">{{ jar.filename }}</p>
                    <a class="tile-m" v-if="selectedVersion.pom" :href="'/api/maven2/' + selectedVersion.pom.url" target="_blank">{{ selectedVersion.pom.filename }}</a>
                </div>
                <div class="content-m">
                    <h2>Actions</h2>
                    <div>
                        <UiButton @click="del" class="delete">Delete</UiButton>
                    </div>
                </div>
            </div>
            <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>
</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;
        const _version = _artifact.versions.at(0);
        if (_version != null)
        {
            selectedVersion.value = _version;
        }
    })
})

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

const dependency = computed(() => {
    if (selectedVersion.value)
    {
        const template = [
            "<dependency>",
            "\t<groupId>" + selectedVersion.value.groupId + "</groupId>",
            "\t<artifactId>" + selectedVersion.value.artifactId + "</artifactId>",
            "\t<version>" + selectedVersion.value.version + "</version>",
            "</dependency>"
        ]
        return template.join("\n").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    }
    return undefined;
});
</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: #e63515;
}
</style>