<script setup lang="ts">
import { ProfileApiClient } from '@/api/profile';
import AppButton from '@/components/AppButton.vue';
import ConfirmModal from '@/components/ConfirmModal.vue';
import HomeModule from '@/components/HomeModule.vue';
import { useProfileStore } from '@/stores/profile-store';
import { useTemplateRef } from 'vue';
import { useRouter } from 'vue-router';

const profileStore = useProfileStore()
const router = useRouter()
const confirmDeleteModal = useTemplateRef('confirmDeleteModal')

async function deleteProfile() {
  if (profileStore.state && await confirmDeleteModal.value?.confirm()) {
    const api = new ProfileApiClient()
    try {
      await api.deleteProfile(profileStore.state.name)
      await router.replace('/profiles')
    } catch (err) {
      console.error(err)
    }
  }
}
</script>
<template>
  <HomeModule title="Profile">
    <template v-slot:default>
      <p>Your currently selected profile is: {{ profileStore.state?.name }}</p>

      <ConfirmModal ref="confirmDeleteModal">
        <p>Are you sure you want to delete this profile?</p>
        <p>This will permanently remove all data associated with this profile, and this cannot be undone!</p>
      </ConfirmModal>
    </template>
    <template v-slot:actions>
      <AppButton icon="folder-open" @click="router.push('/profiles')">Choose another profile</AppButton>
      <AppButton button-style="secondary" icon="trash" @click="deleteProfile()">Delete</AppButton>
    </template>
  </HomeModule>
</template>
