<script setup lang="ts">
import Button from 'primevue/button';
import { usePrfStore } from '../stores';

const prf = usePrfStore();
</script>

<template>
    <div class="mt-4 flex flex-row flex-wrap align-middle gap-4">
        <Button
            label="O.N.G.E.K.I. profile"
            icon="pi pi-plus"
            class="ongeki-button profile-button"
            @click="() => prf.create('ongeki')"
        />
        <Button
            label="CHUNITHM profile"
            icon="pi pi-plus"
            class="chunithm-button profile-button"
            @click="() => prf.create('chunithm')"
        />
    </div>
    <div class="mt-12 flex flex-col flex-wrap align-middle gap-4">
        <div v-for="p in prf.list">
            <div class="flex flex-row flex-wrap align-middle gap-2">
                <Button
                    :disabled="
                        prf.current?.game === p.game &&
                        prf.current?.name === p.name
                    "
                    :label="p.name"
                    :class="
                        (p.game === 'chunithm'
                            ? 'chunithm-button'
                            : 'ongeki-button') +
                        ' ' +
                        'self-center profile-button'
                    "
                    @click="prf.switchTo(p.game, p.name)"
                />
                <Button
                    rounded
                    icon="pi pi-trash"
                    severity="danger"
                    aria-label="remove"
                    size="small"
                    class="self-center ml-2"
                    style="width: 2rem; height: 2rem"
                    :disabled="true"
                />
                <Button
                    rounded
                    icon="pi pi-clone"
                    severity="warn"
                    aria-label="duplicate"
                    size="small"
                    class="self-center"
                    style="width: 2rem; height: 2rem"
                    :disabled="true"
                />
                <Button
                    rounded
                    icon="pi pi-pencil"
                    severity="help"
                    aria-label="duplicate"
                    size="small"
                    class="self-center"
                    style="width: 2rem; height: 2rem"
                    :disabled="true"
                />
            </div>
        </div>
    </div>
</template>

<style scoped>
.profile-button {
    width: 14em;
    white-space: nowrap;
}

.ongeki-button {
    background-color: var(--p-pink-400);
    border-color: var(--p-pink-400);
}

.ongeki-button:hover,
.ongeki-button:active {
    background-color: var(--p-pink-300) !important;
    border-color: var(--p-pink-300) !important;
}

.chunithm-button {
    background-color: var(--p-yellow-400);
    border-color: var(--p-yellow-400);
}
.chunithm-button:hover,
.chunithm-button:active {
    background-color: var(--p-yellow-300) !important;
    border-color: var(--p-yellow-300) !important;
}
</style>
