<script setup lang="ts">
import {computed, ref} from 'vue';
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonButton, IonIcon } from '@ionic/vue';
import { playOutline, statsChartOutline, personOutline, logOutOutline } from 'ionicons/icons';
// import userImage from '../assets/groot.jpg'
import {useStore} from "vuex";
import {useRouter} from "vue-router";

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

const userImage = ref(null);
// const userImage = ref('../assets/groot.jpg');

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

console.log('user', pitcher.value);
if (pitcher.value === undefined || pitcher.value === null || pitcher.value === '') {
  router.push({ path: '/login' });
}

const startBullpen = () => {
  console.log('Starting bullpen session');
  router.push({ path: '/bullpen' });
};

const showStats = () => {
  console.log('Showing bullpen stats');
  router.push({ path: '/stats' });
};

const showProfile = () => {
  console.log('Showing profile');
  router.push({ path: '/profile' });
};

const logout = () => {
  console.log('Logout');
  store.dispatch('auth/logout').then(() => {
    router.push({ path: '/' });
  }, error => {
    console.log(error);
  });
}
</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>

      <div class="button-grid">
        <ion-button @click="startBullpen" class="grid-button">
          <ion-icon :icon="playOutline" slot="start" />
          Start Bullpen Session
        </ion-button>
        <ion-button @click="showStats" class="grid-button">
          <ion-icon :icon="statsChartOutline" slot="start" />
          Show Bullpen Stats
        </ion-button>
        <ion-button @click="showProfile" class="grid-button">
          <ion-icon :icon="personOutline" slot="start" />
          Show Profile
        </ion-button>
        <ion-button @click="logout" class="grid-button">
          <ion-icon :icon="logOutOutline" slot="start" />
          Logout
        </ion-button>
      </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;
}

.button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 10px;
  width: 100%;
}

.grid-button {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-inline: 0 !important;
}
</style>
