<template>
  <div class="profile-delete">
    <h2 class="profile-delete__title">{{ $t('delete_account') }}</h2>
    <span class="profile-delete__text">{{ $t('delete_account_text') }}</span>
    <UiBtn
      :disabled="loading"
      class="profile-delete__button"
      wide
      size="l"
      theme="warning"
      @click="isConfirmOpen = true"
    >{{ t('profile.delete_profile') }}</UiBtn>

    <UiConfirm
      v-model="isConfirmOpen"
      :title="$t('profile.delete_profile')"
      :confirm-text="$t('yes')"
      :loading="loading"
      @confirm="deleteProfile"
    >
      <p class="profile-delete__confirm">{{ $t('confirm_delete_profile') }}</p>
    </UiConfirm>
  </div>
</template>

<script setup lang="ts">
import { AuthorizationApiService } from '../../services/api/authorization.service';

const { t } = useI18n();
const { signOut } = useUser(AuthorizationApiService);
const { show } = useSnackbar();

const loading = ref(false);
const isConfirmOpen = ref(false);

async function deleteProfile() {
  try {
    loading.value = true;
    await AuthorizationApiService.deleteProfile();
    isConfirmOpen.value = false;
    show('profile_deleted');
    signOut();
  } catch (err) {
    console.log(err, 'error delete profile');
  } finally {
    loading.value = false;
  }
}
</script>

<style lang="scss">
.profile-delete {
  display: grid;
}

.profile-delete__title {
  @include font-lg;

  margin-bottom: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.profile-delete__text {
  @include font-sm;

  color: $delete-profile-text;
  margin-bottom: 24px;
}

.profile-delete__button {
  height: 50px;
}

.profile-delete__confirm {
  @include font-sm;

  text-align: center;
  max-width: 400px;
}
</style>
