<script setup lang="ts">
import { AuthApiClient } from '@/api/auth';
import { ApiError } from '@/api/base';
import AppButton from '@/components/AppButton.vue';
import AppPage from '@/components/AppPage.vue';
import AppForm from '@/components/form/AppForm.vue';
import FormControl from '@/components/form/FormControl.vue';
import FormGroup from '@/components/form/FormGroup.vue';
import ModalWrapper from '@/components/ModalWrapper.vue';
import { useAuthStore } from '@/stores/auth-store';
import { showAlert, showConfirm } from '@/util/alert';
import { hideLoader, showLoader } from '@/util/loader';
import { ref, useTemplateRef } from 'vue';

const authStore = useAuthStore()

const changePasswordModal = useTemplateRef('changePasswordModal')
const currentPassword = ref('')
const newPassword = ref('')

async function doDeleteUser() {
  if (await showConfirm('Are you sure you want to delete your account? All data will be permanently deleted.')) {
    const api = new AuthApiClient()
    try {
      await api.deleteMyUser()
      await showAlert('Your user has been deleted. You will now be logged out.')
      authStore.onUserLoggedOut()
    } catch (err) {
      console.error(err)
    }
  }
}

async function showChangePasswordModal() {
  await changePasswordModal.value?.show()
  // Reset password vars to avoid data leakage.
  currentPassword.value = ''
  newPassword.value = ''
}

async function doChangePassword() {
  changePasswordModal.value?.close()
  showLoader()
  const api = new AuthApiClient()
  try {
    await api.changeMyPassword(currentPassword.value, newPassword.value)
    hideLoader()
    await showAlert('Password has been updated.')
  } catch (err) {
    hideLoader()
    console.error(err)
    if (err instanceof ApiError) {
      await showAlert(err.message)
    }
  }
}
</script>
<template>
  <AppPage title="My User">
    <p>
      You are logged in as <code>{{ authStore.state?.username }}</code>.
    </p>
    <div style="text-align: right;">
      <AppButton @click="showChangePasswordModal()">Change Password</AppButton>
      <AppButton @click="doDeleteUser()">Delete My User Account</AppButton>
    </div>

    <!-- Modal for changing the user's password. -->
    <ModalWrapper ref="changePasswordModal">
      <template v-slot:default>
        <AppForm>
          <h2>Change Password</h2>
          <FormGroup>
            <FormControl label="Current Password">
              <input type="password" v-model="currentPassword" minlength="8" />
            </FormControl>
          </FormGroup>
          <FormGroup>
            <FormControl label="New Password">
              <input type="password" v-model="newPassword" minlength="8" @keydown.enter.prevent="doChangePassword()" />
            </FormControl>
          </FormGroup>
        </AppForm>
      </template>
      <template v-slot:buttons>
        <AppButton @click="doChangePassword()">Change</AppButton>
        <AppButton button-style="secondary" @click="changePasswordModal?.close()">Cancel</AppButton>
      </template>
    </ModalWrapper>
  </AppPage>
</template>
