<script setup>
import { useSlots, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

defineProps({
    data: {
        type: Object,
        required: true,
    },
});
const slots = useSlots();
const route = useRoute();
const { t } = useI18n();

const module = computed(() => {
    return route.matched[1];
});
</script>

<template>
    <div class="descriptor">
        <div class="header bg-primary q-pa-sm">
            <router-link :to="{ name: `${module.name}List` }">
                <q-btn round flat dense size="md" icon="view_list" color="white">
                    <q-tooltip>{{ t('components.card.mainList') }}</q-tooltip>
                </q-btn>
            </router-link>
            <router-link :to="{ name: `${module.name}Summary`, params: { id: route.params.id } }">
                <q-btn round flat dense size="md" icon="launch" color="white">
                    <q-tooltip>{{ t('components.card.summary') }}</q-tooltip>
                </q-btn>
            </router-link>

            <q-btn v-if="slots.menu" size="md" icon="more_vert" color="white" round flat dense>
                <q-tooltip>{{ t('components.card.moreOptions') }}</q-tooltip>
                <q-menu>
                    <q-list>
                        <slot name="menu" />
                    </q-list>
                </q-menu>
            </q-btn>
        </div>

        <div v-if="$props.data" class="q-py-sm">
            <slot name="body" />
        </div>

        <!-- Skeleton -->
        <div id="descriptor-skeleton" v-if="!$props.data">
            <div class="col q-pl-sm q-pa-sm">
                <q-skeleton type="text" square height="45px" />
                <q-skeleton type="text" square height="18px" />
                <q-skeleton type="text" square height="18px" />
                <q-skeleton type="text" square height="18px" />
            </div>

            <q-card-actions>
                <q-skeleton size="40px" />
                <q-skeleton size="40px" />
                <q-skeleton size="40px" />
                <q-skeleton size="40px" />
                <q-skeleton size="40px" />
            </q-card-actions>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.descriptor {
    max-width: 256px;

    h5 {
        margin: 0 15px;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }

    .q-card__actions {
        justify-content: center;
    }

    #descriptor-skeleton .q-card__actions {
        justify-content: space-between;
    }
}
</style>
