<script setup lang="ts">
import { useAuthStore } from '~/stores/auth';
import { ref } from 'vue';

definePageMeta({ title: 'Member Profile' });

const authStore = useAuthStore();
const newName = ref<string | undefined>();

const editName = async () => {
  if (newName.value) {
    try {
      await authStore.updateName(newName.value);
      newName.value = undefined;
    } catch (e) {
      console.log(e);
    }
  } else {
    newName.value = authStore.currentUser?.name || '';
  }
};
</script>

<template>
  <q-page padding class="row">
    <q-list class="col-sm-4 col-12">
      <q-separator />
      <q-item>
        <q-item-section avatar>
          <q-avatar icon="person" />
        </q-item-section>
        <q-item-section>
          <q-item-label caption>Name</q-item-label>
          <q-input
            filled
            v-model="newName"
            @keydown.enter.prevent="editName"
            v-if="newName !== undefined" />
          <div v-else>{{ authStore.currentUser?.name }}</div>
        </q-item-section>
        <q-item-section avatar>
          <q-btn
            square
            @click="editName"
            :icon="newName !== undefined ? 'check' : 'edit'" />
          <q-btn
            v-if="newName !== undefined"
            square
            color="negative"
            @click="newName = undefined"
            icon="cancel" />
        </q-item-section>
      </q-item>
      <q-item>
        <q-item-section avatar>
          <q-avatar icon="email" />
        </q-item-section>
        <q-item-section>
          <q-item-label caption>E-mail</q-item-label>
          {{ authStore.currentUser?.email }}
        </q-item-section>
      </q-item>
      <q-separator />
      <q-item>
        <q-item-section>
          <q-item-label overline>Certifications</q-item-label>
          <div>
            <q-chip square icon="verified" color="green" text-color="white">J/27</q-chip>
            <q-chip square icon="verified" color="blue" text-color="white">Capri25</q-chip>
            <q-chip square icon="verified" color="grey-9" text-color="white">Night</q-chip>
          </div>
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>
