<script setup lang="ts">
import {computed, onMounted, ref} from "vue";
import {
  IonContent,
  IonHeader,
  IonFooter,
  IonToolbar,
  IonTitle,
  IonLabel,
  IonButton,
  IonPage,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardTitle, IonRow, IonGrid, IonCol,
} from "@ionic/vue";
import {BullpenStep} from "@/types/BullpenStep";
import PitchType from "@/types/PitchType";
import Pitch from "@/types/Pitch";
import BullpenSessionService from "@/services/BullpenSessionService";
import {useRouter} from "vue-router";
import {useStore} from 'vuex';

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

const pitch = ref<Pitch>(BullpenSessionService.createPitch());
const currentStep = ref<BullpenStep>(BullpenStep.Prepare);

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

onMounted(async () => {
  await store.dispatch("bullpen/start", pitcher.value);
});

const setPitchType = (pitchType: PitchType) => {
  pitch.value.pitchTypeId = pitchType.id;
}

const gotoFinalizePitch = () => {
  currentStep.value = BullpenStep.Finish;
}

const finalizeAndNextPitch = () => {
  store.commit("bullpen/addPitch", pitch.value);
  pitch.value = BullpenSessionService.createPitch();
  currentStep.value = BullpenStep.Prepare;
}

const finalizeAndEndBullpen = () => {
  store.commit("bullpen/addPitch", pitch.value);
  pitch.value = BullpenSessionService.createPitch();
  currentStep.value = BullpenStep.Prepare;
  const bp = bullpen.value.bullpen;
  bp.finishedAt = new Date();
  store.dispatch("bullpen/finish", bp);
  router.push({ name: 'BullpenStats' });
}

const setPlannedPitchArea = (hitArea: number) => {
  if (currentStep.value === BullpenStep.Prepare) {
    pitch.value.aimedArea = hitArea;
  } else {
    pitch.value.hitArea = hitArea;
  }
};

const pitchAreaCssClasses = (area: number, name: string) => {
  const classes = [];

  if (pitch.value.aimedArea === area) {
    classes.push(name + '-aim-selected');
  }
  if (pitch.value.hitArea === area) {
    classes.push(name + '-hit-selected');
  }

  return classes;
}
</script>

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title v-if="isAuthenticated">Pitching {{ pitcher.firstName }} {{ pitcher.lastName }}</ion-title>
        <ion-title v-else>Pitching</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-card>
        <ion-card-header>
          <ion-card-title>Select Pitch type</ion-card-title>
        </ion-card-header>
        <ion-card-content>
            <ion-button v-for="(pitchType, index) in pitchTypes" :key="index" :color="pitchType.id !== pitch.pitchTypeId ? 'primary' : 'warning'" @click="setPitchType(pitchType)">
              <ion-label>{{pitchType.abbreviation}}</ion-label>
            </ion-button>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header>
          <ion-card-title>Select Planned 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="pitchAreaCssClasses(21, 'wasted')" class="wasted" points="0,0 105,0 105,60 60,60 60,105 0,105" @click="setPlannedPitchArea(21)" />
            <rect :class="pitchAreaCssClasses(22, 'wasted')" class="wasted" x="105" y="0" width="150" height="60" @click="setPlannedPitchArea(22)" />
            <polygon :class="pitchAreaCssClasses(23, 'wasted')" class="wasted" points="255,0 360,0 360,105 300,105 300,60, 255,60" @click="setPlannedPitchArea(23)"  />
            <rect :class="pitchAreaCssClasses(24, 'wasted')" class="wasted" x="0" y="105" width="60" height="150" @click="setPlannedPitchArea(24)"  />
            <rect :class="pitchAreaCssClasses(25, 'wasted')" class="wasted" x="300" y="105" width="60" height="150" @click="setPlannedPitchArea(25)" />
            <polygon :class="pitchAreaCssClasses(26, 'wasted')" class="wasted" points="0,255 60,255 60,300 105,300 105,360 0,360" @click="setPlannedPitchArea(26)"  />
            <rect :class="pitchAreaCssClasses(27, 'wasted')" class="wasted" x="105" y="300" width="150" height="60" @click="setPlannedPitchArea(27)" />
            <polygon :class="pitchAreaCssClasses(28, 'wasted')" class="wasted" points="255,300 300,300 300,255 360,255 360,360 255,360" @click="setPlannedPitchArea(28)"  />

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

            <polygon :class="pitchAreaCssClasses(11, 'edge')" class="edge" points="60,60 155,60 155,105 105,105 105,155, 60,155" @click="setPlannedPitchArea(11)" />
            <rect :class="pitchAreaCssClasses(12, 'edge')" class="edge" x="155" y="60" width="50" height="45" @click="setPlannedPitchArea(12)" />
            <polygon :class="pitchAreaCssClasses(13, 'edge')" class="edge" points="205,60 300,60 300,155 255,155 255,105, 205,105" @click="setPlannedPitchArea(13)" />
            <rect :class="pitchAreaCssClasses(14, 'edge')" class="edge" x="60" y="155" width="45" height="50" @click="setPlannedPitchArea(14)" />
            <rect :class="pitchAreaCssClasses(15, 'edge')" class="edge" x="255" y="155" width="45" height="50" @click="setPlannedPitchArea(15)" />
            <polygon :class="pitchAreaCssClasses(16, 'edge')" class="edge" points="60,205 105,205 105,255 155,255 155,300, 60,300" @click="setPlannedPitchArea(16)" />
            <rect :class="pitchAreaCssClasses(17, 'edge')" class="edge" x="155" y="255" width="50" height="45" @click="setPlannedPitchArea(17)" />
            <polygon :class="pitchAreaCssClasses(18, 'edge')" class="edge" points="205,255 255,255 255,205 300,205 300,300 205,300" @click="setPlannedPitchArea(18)" />

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

            <rect :class="pitchAreaCssClasses(1, 'inside')" class="inside" x="105" y="105" width="50" height="50" @click="setPlannedPitchArea(1)"/>
            <rect :class="pitchAreaCssClasses(2, 'inside')" class="inside" x="155" y="105" width="50" height="50" @click="setPlannedPitchArea(2)"/>
            <rect :class="pitchAreaCssClasses(3, 'inside')" class="inside" x="205" y="105" width="50" height="50" @click="setPlannedPitchArea(3)"/>
            <rect :class="pitchAreaCssClasses(4, 'inside')" class="inside" x="105" y="155" width="50" height="50" @click="setPlannedPitchArea(4)"/>
            <rect :class="pitchAreaCssClasses(5, 'inside')" class="inside" x="155" y="155" width="50" height="50" @click="setPlannedPitchArea(5)"/>
            <rect :class="pitchAreaCssClasses(6, 'inside')" class="inside" x="205" y="155" width="50" height="50" @click="setPlannedPitchArea(6)"/>
            <rect :class="pitchAreaCssClasses(7, 'inside')" class="inside" x="105" y="205" width="50" height="50" @click="setPlannedPitchArea(7)"/>
            <rect :class="pitchAreaCssClasses(8, 'inside')" class="inside" x="155" y="205" width="50" height="50" @click="setPlannedPitchArea(8)"/>
            <rect :class="pitchAreaCssClasses(9, 'inside')" class="inside" x="205" y="205" width="50" height="50" @click="setPlannedPitchArea(9)"/>

            <text x="130"  y="140"  class="number" @click="setPlannedPitchArea(1)">1</text>
            <text x="180"  y="140"  class="number" @click="setPlannedPitchArea(2)">2</text>
            <text x="230"  y="140"  class="number" @click="setPlannedPitchArea(3)">3</text>
            <text x="130"  y="190"  class="number" @click="setPlannedPitchArea(4)">4</text>
            <text x="180"  y="190"  class="number" @click="setPlannedPitchArea(5)">5</text>
            <text x="230"  y="190"  class="number" @click="setPlannedPitchArea(6)">6</text>
            <text x="130"  y="240"  class="number" @click="setPlannedPitchArea(7)">7</text>
            <text x="180"  y="240"  class="number" @click="setPlannedPitchArea(8)">8</text>
            <text x="230"  y="240"  class="number" @click="setPlannedPitchArea(9)">9</text>
          </svg>
        </ion-card-content>
      </ion-card>
    </ion-content>
    <ion-footer>
      <div v-if="currentStep === BullpenStep.Prepare">
        <ion-grid>
          <ion-row>
            <ion-col>
              <ion-button color="warning" expand="full" size="large" :disabled="pitch.pitchTypeId === 0 || pitch.aimedArea === 0" @click="gotoFinalizePitch">Pitch</ion-button>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
      <div v-if="currentStep === BullpenStep.Finish">
        <ion-grid>
          <ion-row>
            <ion-col>
              <ion-button color="success" expand="full" @click="finalizeAndNextPitch" :disabled="pitch.hitArea === 0">Save Pitch<br/>&<br/>Next Pitch</ion-button>
            </ion-col>
            <ion-col>
              <ion-button color="success" expand="full" @click="finalizeAndEndBullpen" :disabled="pitch.hitArea === 0">Save Pitch<br/>&<br/>End Session</ion-button>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </ion-footer>
  </ion-page>
</template>

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