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

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

const finalizeAndNextPitch = () => {
  bullpenSessionService.nextPitch();
  router.push({ name: 'PreparePitch' });
}

const finalizeAndEndBullpen = () => {
  bullpenSessionService.nextPitch();
  bullpenSessionService.finishSession();
  router.push({ name: 'BullpenStats' });
}

const setRealPitchArea = (hitArea: number) => {
  bps.value.currentBullpenPitch().realPitchArea = hitArea;
};

</script>

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Finalize Pitch for {{ bps.getPitcher().firstName }} {{ bps.getPitcher().lastName }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-card>
        <ion-card-header>
          <ion-card-title>Select Real Pitch Hit Area</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
            <polygon :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 21}" class="wasted" points="0,0 105,0 105,60 60,60 60,105 0,105" @click="setRealPitchArea(21)" />
            <rect :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 22}" class="wasted" x="105" y="0" width="150" height="60" @click="setRealPitchArea(22)" />
            <polygon :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 23}" class="wasted" points="255,0 360,0 360,105 300,105 300,60, 255,60" @click="setRealPitchArea(23)"  />
            <rect :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 24}" class="wasted" x="0" y="105" width="60" height="150" @click="setRealPitchArea(24)"  />
            <rect :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 25}" class="wasted" x="300" y="105" width="60" height="150" @click="setRealPitchArea(25)" />
            <polygon :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 26}" class="wasted" points="0,255 60,255 60,300 105,300 105,360 0,360" @click="setRealPitchArea(26)"  />
            <rect :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 27}" class="wasted" x="105" y="300" width="150" height="60" @click="setRealPitchArea(27)" />
            <polygon :class="{'wasted-selected': bps.currentBullpenPitch().realPitchArea === 28}" class="wasted" points="255,300 300,300 300,255 360,255 360,360 255,360" @click="setRealPitchArea(28)"  />

            <text x="30" y="40" class="number" @click="setRealPitchArea(21)" >21</text>
            <text x="180" y="40" class="number" @click="setRealPitchArea(22)" >22</text>
            <text x="330" y="40" class="number" @click="setRealPitchArea(23)" >23</text>
            <text x="30" y="190" class="number" @click="setRealPitchArea(24)" >24</text>
            <text x="330" y="190" class="number" @click="setRealPitchArea(25)" >25</text>
            <text x="30" y="330" class="number" @click="setRealPitchArea(26)" >26</text>
            <text x="180" y="330" class="number" @click="setRealPitchArea(27)" >27</text>
            <text x="330" y="330" class="number" @click="setRealPitchArea(28)" >28</text>

            <polygon :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 11}" class="edge" points="60,60 155,60 155,105 105,105 105,155, 60,155" @click="setRealPitchArea(11)" />
            <rect :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 12}" class="edge" x="155" y="60" width="50" height="45" @click="setRealPitchArea(12)" />
            <polygon :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 13}" class="edge" points="205,60 300,60 300,155 255,155 255,105, 205,105" @click="setRealPitchArea(13)" />
            <rect :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 14}" class="edge" x="60" y="155" width="45" height="50" @click="setRealPitchArea(14)" />
            <rect :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 15}" class="edge" x="255" y="155" width="45" height="50" @click="setRealPitchArea(15)" />
            <polygon :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 16}" class="edge" points="60,205 105,205 105,255 155,255 155,300, 60,300" @click="setRealPitchArea(16)" />
            <rect :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 17}" class="edge" x="155" y="255" width="50" height="45" @click="setRealPitchArea(17)" />
            <polygon :class="{'edge-selected': bps.currentBullpenPitch().realPitchArea === 18}" class="edge" points="205,255 255,255 255,205 300,205 300,300 205,300" @click="setRealPitchArea(18)" />

            <text x="80"  y="90"  class="number" @click="setRealPitchArea(11)">11</text>
            <text x="180" y="90"  class="number" @click="setRealPitchArea(12)">12</text>
            <text x="275" y="90"  class="number" @click="setRealPitchArea(13)">13</text>
            <text x="80"  y="190" class="number" @click="setRealPitchArea(14)">14</text>
            <text x="275" y="190" class="number" @click="setRealPitchArea(15)">15</text>
            <text x="80"  y="285" class="number" @click="setRealPitchArea(16)">16</text>
            <text x="180" y="285" class="number" @click="setRealPitchArea(17)">17</text>
            <text x="275" y="285" class="number" @click="setRealPitchArea(18)">18</text>

            <rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 1}" class="inside" x="105" y="105" width="50" height="50" @click="setRealPitchArea(1)"/>
            <rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 2}" class="inside" x="155" y="105" width="50" height="50" @click="setRealPitchArea(2)"/>
            <rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 3}" class="inside" x="205" y="105" width="50" height="50" @click="setRealPitchArea(3)"/>
            <rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 4}" class="inside" x="105" y="155" width="50" height="50" @click="setRealPitchArea(4)"/>
            <rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 5}" class="inside" x="155" y="155" width="50" height="50" @click="setRealPitchArea(5)"/>
            <rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 6}" class="inside" x="205" y="155" width="50" height="50" @click="setRealPitchArea(6)"/>
            <rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 7}" class="inside" x="105" y="205" width="50" height="50" @click="setRealPitchArea(7)"/>
            <rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 8}" class="inside" x="155" y="205" width="50" height="50" @click="setRealPitchArea(8)"/>
            <rect :class="{'inside-selected': bps.currentBullpenPitch().realPitchArea === 9}" class="inside" x="205" y="205" width="50" height="50" @click="setRealPitchArea(9)"/>

            <text x="130"  y="140"  class="number" @click="setRealPitchArea(1)">1</text>
            <text x="180"  y="140"  class="number" @click="setRealPitchArea(2)">2</text>
            <text x="230"  y="140"  class="number" @click="setRealPitchArea(3)">3</text>
            <text x="130"  y="190"  class="number" @click="setRealPitchArea(4)">4</text>
            <text x="180"  y="190"  class="number" @click="setRealPitchArea(5)">5</text>
            <text x="230"  y="190"  class="number" @click="setRealPitchArea(6)">6</text>
            <text x="130"  y="240"  class="number" @click="setRealPitchArea(7)">7</text>
            <text x="180"  y="240"  class="number" @click="setRealPitchArea(8)">8</text>
            <text x="230"  y="240"  class="number" @click="setRealPitchArea(9)">9</text>
          </svg>
        </ion-card-content>
      </ion-card>
    </ion-content>
    <ion-footer>
      <ion-grid>
        <ion-row>
          <ion-col><ion-button color="success" expand="full" @click="finalizeAndNextPitch" :disabled="bps.currentBullpenPitch().realPitchArea === 0">Save Pitch<br/>&<br/>Next Pitch</ion-button></ion-col>
          <ion-col><ion-button color="success" expand="full" @click="finalizeAndEndBullpen" :disabled="bps.currentBullpenPitch().realPitchArea === 0">Save Pitch<br/>&<br/>End Session</ion-button></ion-col>
        </ion-row>
      </ion-grid>
    </ion-footer>
  </ion-page>
</template>

<style scoped>
.wasted {
  fill: firebrick;
  stroke: black;
  stroke-width: 1;
}
.wasted-selected {
  fill: orangered;
  stroke: black;
  stroke-width: 1;
}
.edge {
  fill: lightgreen;
  stroke: black;
  stroke-width: 1;
}
.edge-selected {
  fill: aquamarine;
  stroke: black;
  stroke-width: 1;
}
.inside {
  fill: green;
  stroke: black;
  stroke-width: 1;
}
.inside-selected {
  fill: darkolivegreen;
  stroke: black;
  stroke-width: 1;
}
.number {
  text-anchor: middle;
  fill: white;
  font-size: 30px;
}
</style>
