<!--
bouton Créer
-->

<template>
  <main>
    <v-btn
      elevation="2"
      color="ot_warning ot_white--text"
      @click="showDialog=true"
    >
      {{ $t('create') }}
    </v-btn>
    <lazy-LayoutDialog
      :show="showDialog"
    >

      <template #dialogType>{{ $t('creative_assistant') }}</template>
      <template #dialogTitle>
        <span v-if="type=='home'">{{ $t('what_do_you_want_to_create') }}</span>
        <span v-else-if="type=='access'">{{ $t('universal_create_title_access') }}</span>
        <span v-else-if="type=='event'">{{ $t('universal_create_title_event') }}</span>
        <span v-else-if="type=='message'">{{ $t('universal_create_title_message') }}</span>
      </template>
      <template #dialogText>
        <LayoutHeaderUniversalCreationGenerateCardsSteps :step="step" @updateStep="updateStep" />
      </template>
      <template #dialogBtn>
        <div class="text-center">
          <v-btn
            color="ot_super_light_grey"
            @click="showDialog=false;step=1;type='home'"
          >
            {{ $t('cancel') }}
          </v-btn>
          <v-btn
            v-if="step > 1"
            color="ot_super_light_grey"
            @click="step=1;type='home'"
          >
            {{ $t('previous') }}
          </v-btn>
        </div>
      </template>
    </lazy-LayoutDialog>
  </main>
</template>

<script lang="ts">
import {defineComponent, Ref,ref} from '@nuxtjs/composition-api'

export default defineComponent({
  setup () {
    const showDialog:Ref<Boolean> = ref(false);
    const step:Ref<Number> = ref(1);
    const type:Ref<String> = ref('home');
    const updateStep = ({stepChoice, typeChoice}: any) =>{
      step.value = stepChoice
      type.value = typeChoice
    }
    return {
      showDialog,
      updateStep,
      step,
      type
    }
  }
})
</script>
<style scoped>

</style>
