<script setup lang="ts">
import {logOutOutline, personOutline, playOutline, statsChartOutline} from "ionicons/icons";
import {
  IonAvatar,
  IonButton,
  IonContent,
  IonFooter,
  IonHeader,
  IonIcon,
  IonPage,
  IonTitle,
  IonToolbar
} from "@ionic/vue";
import {computed, ref} from "vue";

import {useStore} from "vuex";
import {useRouter} from "vue-router";

const userImage = ref(null);

const router = useRouter();
const store = useStore();

const pitcher = computed(() => store.state.auth.user);
const isAuthenticated = computed(() => store.state.auth.isAuthenticated);

const gotoHome = () => {
  router.push({path: '/home'});
}

</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title v-if="isAuthenticated">Home of {{ pitcher.firstName }} {{ pitcher.lastName }}</ion-title>
        <ion-title v-else>Home</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
      <div class="user-container">
        <ion-avatar class="user-avatar">
          <template v-if="userImage">
            <img :src="userImage" alt="User Profile" class="avatar-frame" />
          </template>
          <template v-else>
            <ion-icon :icon="personOutline" class="avatar-placeholder" />
          </template>
        </ion-avatar>
        <div v-if="isAuthenticated" class="user-name">{{ pitcher.firstName }} {{ pitcher.lastName }}</div>
      </div>
    </ion-content>

    <ion-footer>
      <ion-button expand="full" color="success" @click="gotoHome">Home</ion-button>
    </ion-footer>
  </ion-page>
</template>

<style scoped>
.user-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 30vh;
  background-color: #f0f0f0;
  padding: 5px;
}

.user-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #ccc;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-placeholder {
  font-size: 60px;
  color: #888;
}

.user-name {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
</style>