<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>

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

const authStore = useAuthStore();
const newName = ref();

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>
