<script setup lang="ts">
import {
  IonButton,
  IonBadge,
  IonLabel,
  IonList,
  IonItem,
  IonFooter,
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardContent,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar
} from '@ionic/vue';
import {ref} from 'vue'
import {useRouter} from 'vue-router';
import {BullpenSessionService, bullpenSessionService} from "@/services/BullpenSessionService";

const router = useRouter();
const bps = ref<BullpenSessionService>(bullpenSessionService);

const gotoHome = () => {
  router.push('/home');
};
</script>

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Bullpen Stats for {{ bps.getPitcher().firstName }} {{ bps.getPitcher().lastName }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-card v-for="(pitch, index) in bps.getBullpenPitches()" :key="index">
        <ion-card-header>
          <ion-card-title>Pitch {{index+1}}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-list>
            <ion-item>
              <ion-label>Pitch Type</ion-label>
              <ion-badge>{{pitch.pitchType.name}}</ion-badge>
            </ion-item>
            <ion-item>
              <ion-label>Planned Pitch Area</ion-label>
              <ion-badge>{{pitch.plannedPitchArea}}</ion-badge>
            </ion-item>
            <ion-item>
              <ion-label>Real Pitch Area</ion-label>
              <ion-badge>{{pitch.realPitchArea}}</ion-badge>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
    </ion-content>
    <ion-footer>
      <ion-button expand="full" color="success" @click="gotoHome">Home</ion-button>
    </ion-footer>
  </ion-page>
</template>

<style scoped>

</style>
