<script setup lang="ts">
import { computed } from "vue";
import { useMainStore } from "@/stores/main";
import { storeToRefs } from "pinia";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const mainStore = useMainStore();
const mainStoreRef = storeToRefs(mainStore);
const userProfile = mainStoreRef.readUserProfile;

const greetedUser = computed(() => {
  const userProfile = mainStoreRef.readUserProfile;
  if (userProfile.value) {
    if (userProfile.value!.full_name) {
      return userProfile.value!.full_name;
    } else {
      return userProfile.value.email;
    }
  }
});
</script>

<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title primary-title>
        <h3>Welcome {{ greetedUser }}</h3>
      </v-card-title>
      <v-card-text class="my-3">
          <h4 class="">
            {{ t("userName") }}
          </h4>
          <span v-if="userProfile && userProfile.full_name">
            {{ userProfile.full_name }}
          </span>
          <div v-else>-</div>

          <h4 class="mt-3">
            {{ t("emailAddress") }}
          </h4>
          <span v-if="userProfile && userProfile.email">
            {{ userProfile.email }}
          </span>
          <div v-else>-</div>
      </v-card-text>
      <v-card-actions>
        <v-btn to="/main/profile/edit" variant="outlined" color="primary">{{
          t("edit")
        }}</v-btn>
        <v-btn
          to="/main/profile/password"
          variant="flat"
          color="primary"
          class="ms-3"
          >{{ t("changePassword") }}</v-btn
        >
      </v-card-actions>
      <!-- <v-card-actions>
        <v-btn to="/main/profile/view">View Profile</v-btn>
        <v-btn to="/main/profile/edit">Edit Profile</v-btn>
        <v-btn to="/main/profile/password">Change Password</v-btn>
      </v-card-actions> -->
    </v-card>
  </v-container>
</template>

<style lang="scss" scoped>
.v-toolbar__content {
  background-image: linear-gradient(
    -225deg,
    rgb(234, 84, 19) 35%,
    rgb(178, 69, 146) 100%
  );
}
</style>
