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

import {useStore} from "vuex";
import {useRoute} from "vue-router";
import PlayerService from "@/services/PlayerService";
// import dayjs from "dayjs";

const userImage = ref(null);

const route = useRoute();
const store = useStore();

const id = route.params.id as string | undefined; // `id` parameter from route

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

onMounted(() => {
  PlayerService
      .fetchByUserId(Number(id))
      .then((response) => {
        console.log('Fetched player:', response);
        // player.value = response;
        // resetForm({ values: { ...player.value } }); // Reset form with fetched data
        // formattedDate.value = dayjs(player.value.user.dateOfBirth).format('YYYY-MM-DD');
      })
      .catch((error) => {
        console.error('Failed to fetch player:', error);
      });
});

</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>Profile</ion-title>
      </ion-toolbar>
    </ion-header>

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