<template>
  <v-dialog
    v-model="modelValue"
    :max-width="600"
    no-click-animation
    persistent
  >
    <v-card>
      <v-card-text class="pa-0">
        <img
          src="@/assets/images/intro.svg"
          alt="intro"
          width="600"
        />
      </v-card-text>
      <v-card-text class="font-weight-bold text-h4 text-center">
        <span>{{ t('texts.welcome') }}</span>
      </v-card-text>
      <v-card-text class="text-center">
        <p>{{ t('texts.takeTour') }}</p>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn
          color="primary"
          size="large"
          width="150"
          variant="text"
          @click="modelValue = false"
        >
          <span>{{ t('labels.dismiss') }}</span>
        </v-btn>
        <v-btn
          color="primary"
          size="large"
          width="150"
          variant="flat"
          @click="start"
        >
          <span>{{ t('labels.letsGo') }}</span>
        </v-btn>
        <v-spacer />
      </v-card-actions>
      <v-card-actions>
        <v-spacer />
        <v-checkbox v-model="dontShowAgain">
          <template #label>
            <span>{{ t('texts.dontShowAgain') }}</span>
          </template>
        </v-checkbox>
        <v-spacer />
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { useIntroStore } from '@/stores/intro.store';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

type Emits = {
  start: [void];
};

const emit = defineEmits<Emits>();

const { t } = useI18n();
const { dontShowAgain } = storeToRefs(useIntroStore());

const modelValue = defineModel<boolean>({ default: false });

function start(): void {
  modelValue.value = false;
  emit('start');
}
</script>
