<template>
  <div>
    <button class="deleteBtn" @click="openModal">
      {{ $t('profile.delete_account') }}
    </button>
  </div>

  <UiModale @close="closeModal" :modalActive="modalActive">
    <div class="modal-content">
      <h1>{{ $t('delete.modale.title') }}</h1>
        <p>{{ $t('delete.modale.text1') }}</p>
        <!-- <p>{{ $t('emailUpdate.modale.text2') }}</p> -->
        <div class="modale-btns">
          <ButtonBase ref=ConfirmBtn @click="confirm" :loading="awaiting">{{ $t('ui.yes') }}</ButtonBase>
          <ButtonBase class="btn" @click="closeModal">{{ $t('ui.no') }}</ButtonBase>
      </div>
    </div>
  </UiModale>

  <UiModale @close="closeModalInfo" :modalActive="modalInfoActive">
    <div class="modal-content">
      <h1>{{ $t('delete.modale2.title') }}</h1>
      <p>{{ $t('delete.modale2.text1') }}</p>
      <div class="modale-btns">
        <ButtonBase ref=btnCloseInfo @click="closeModalInfo">{{ $t('ui.ok') }}</ButtonBase>
      </div>
    </div>
  </UiModale>

</template>

<script setup lang="ts">
  const {locale} = useI18n() 
  const authStore = useAuthStore();
  const modalActive = ref(false);
  const modalInfoActive = ref(false)
  const awaiting = ref(false)

  const openModal = () => {
    modalActive.value = true;
  }
  const closeModal = () => {
    modalActive.value = false;
  }
  const confirm = async (locale:string) => {
    awaiting.value = true;
    await authStore.deleteRequest(locale)
    awaiting.value=false
    modalActive.value = false;
    modalInfoActive.value = true
  }
  const closeModalInfo = () => {
    modalInfoActive.value = false
  }

</script>

<style scoped lang="scss">
.deleteBtn{
  color:red;
  font-weight: bold;
  margin:0;
  border:none;
  text-align: left;
  background-color: none;
  &:hover{
    color:rgb(83, 0, 0)
  }
}
button{
  text-align: center;
}

</style>