<script setup>
    import { defineAsyncComponent, ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { mdiMessageAlertOutline } from '@mdi/js';

    const FeedbackSubmissionDialog = defineAsyncComponent(() => import('./FeedbackSubmissionDialog.vue'));

    const { t } = useI18n();
    const isDialogOpen = ref(false);
</script>

<template>
    <div
        class="feedback-entry"
        data-feedback-ui="true"
    >
        <v-btn variant="text" :ripple="false"
            class="feedback-entry-button"
            type="button"
            :title="t('feedback.open')"
            @click="isDialogOpen = true"
        >
            <v-icon :icon="mdiMessageAlertOutline" />
            <span>{{ t('feedback.button') }}</span>
        </v-btn>

        <FeedbackSubmissionDialog v-model="isDialogOpen" />
    </div>
</template>

<style scoped>
@reference "@/assets/main.css";
    .feedback-entry {
        @apply fixed bottom-5 right-5 z-50;
    }

    .feedback-entry-button {
        @apply flex h-12 items-center gap-2 rounded-full border px-4 text-sm font-bold shadow-lg transition-colors;
        background: rgb(var(--v-theme-accent-strong));
        border-color: rgba(255, 255, 255, 0.55);
        color: #ffffff;
        box-shadow: 0 16px 34px rgb(var(--v-theme-accent-strong) / 0.28);
    }

    .feedback-entry-button:hover {
        background: color-mix(in srgb, rgb(var(--v-theme-accent-strong)) 82%, rgb(var(--v-theme-primary)));
        box-shadow: 0 18px 38px rgb(var(--v-theme-accent-strong) / 0.28);
    }

    .feedback-entry-button:focus-visible {
        outline: 3px solid color-mix(in srgb, rgb(var(--v-theme-accent)) 35%, transparent);
        outline-offset: 3px;
    }

    .feedback-entry-button span {
        @apply hidden sm:inline;
    }
</style>
