<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import {
  InfiniteScrollCustomEvent,
  IonIcon,
  IonInfiniteScroll,
  IonInfiniteScrollContent,
  IonItem,
  IonLabel,
  IonList
} from '@ionic/vue';
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {baseballOutline} from 'ionicons/icons';
import Bullpen from '@/types/Bullpen';
import BullpenSessionService from "@/services/BullpenSessionService";
import dayjs from 'dayjs';
import PitchType from '@/types/PitchType';

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

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

const items = reactive<Bullpen[]>([]);
const page = ref(0);

const startBullpenSession = () => {
  router.push({ path: "/bullpen" });
};

const generateItems = () => {
  BullpenSessionService
      .fetchAllByUser(user.value.id, page.value, 10)
      .then((bullpens) => {
        ++page.value;
        bullpens.data.forEach((bullpen: Bullpen) => {
          items.push(bullpen);
        })
      }, error => {
        console.log(error);
      });
};

const formatDate = (date: Date) => {
  return dayjs(date).format('YYYY.MM.DD HH:mm');
}

const determinePitchTypeName = (id: number): string => {
  const pitchType = pitchTypes.value.find((pitchType: PitchType) => pitchType.id === id);

  return pitchType?.name ?? 'Unknown';
}

const ionInfinite = (event: InfiniteScrollCustomEvent) => {
  generateItems();
  setTimeout(() => event.target.complete(), 500);
};

generateItems();

</script>

<template>
  <ion-list>
    <ion-item v-for="(bullpen, index) in items" :key="index" lines="none" class="custom-item" :button="true" detail="false">
      <!-- Top-left icon -->
      <ion-icon :icon="baseballOutline" slot="start" class="item-icon"></ion-icon>

      <ion-label class="item-labels">
        <!-- First Progress Bar -->
        <div class="progress-section">
          <div class="top-row">
            <span class="left-label">Task 1</span>
            <span class="right-label">{{ (0.57 * 100).toFixed(0) }}%</span>
          </div>
          <ion-progress-bar :value="0.57"></ion-progress-bar>
        </div>

        <!-- Second Progress Bar -->
        <div class="progress-section">
          <div class="top-row">
            <span class="left-label">Task 2</span>
            <span class="right-label">{{ (0.33 * 100).toFixed(0) }}%</span>
          </div>
          <ion-progress-bar :value="0.33" color="secondary"></ion-progress-bar>
        </div>
      </ion-label>
    </ion-item>

<!--    <ion-item v-for="(bullpen, index) in items" :key="index">-->
<!--      <ion-icon aria-hidden="true" :icon="baseball" slot="start"></ion-icon>-->
<!--      <ion-label>Bullpen from ({{formatDate(bullpen.startedAt)}})</ion-label>-->
<!--      <ion-list v-for="(pitch, index) in bullpen.pitches" :key="index">-->
<!--        <ion-item>-->
<!--          <ion-icon slot="start" :icon="baseballOutline" class="icon-login"></ion-icon>-->
<!--          <ion-label>{{determinePitchTypeName(pitch.pitchTypeId)}}</ion-label>-->
<!--          <ion-badge>{{pitch.aimedArea}}</ion-badge>-->
<!--          <ion-badge>{{pitch.hitArea}}</ion-badge>-->
<!--        </ion-item>-->
<!--      </ion-list>-->
<!--    </ion-item>-->
  </ion-list>
  <ion-infinite-scroll @ionInfinite="ionInfinite">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</template>

<style scoped>
.custom-item {
  align-items: flex-start !important; /* important override */
  --padding-start: 16px;
  --inner-padding-end: 16px;
  --min-height: 100px;
}

.item-icon {
  font-size: 28px;
  color: var(--ion-color-danger);
  margin-right: 12px;
  margin-top: 18px;
}

.item-labels {
  width: 100%;
}

.progress-section {
  margin-bottom: 12px;
}

.top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.left-label {
  font-weight: bold;
  font-size: 16px;
}

.right-label {
  font-weight: normal;
  font-size: 14px;
}
</style>
