<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Schedule</ion-title>
       <ion-buttons slot="end">
          <ion-button :router-link="'/tabs/search_page/'">
            <ion-icon slot="icon-only" :icon="search"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class='ion-padding' v-if="today">
      <ion-segment :scrollable="true" :value="today">
        <ion-segment-button value="mon" @click="changeDay($event)">
          Mon
        </ion-segment-button>
        <ion-segment-button value="tue" @click="changeDay($event)">
          Tue
        </ion-segment-button>
        <ion-segment-button value="wed" @click="changeDay($event)">
          Wed
        </ion-segment-button>
        <ion-segment-button value="thu" @click="changeDay($event)">
          Thu
        </ion-segment-button>
        <ion-segment-button value="fri" @click="changeDay($event)">
          Fri
        </ion-segment-button>
        <ion-segment-button value="sat" @click="changeDay($event)">
          Sat
        </ion-segment-button>
        <ion-segment-button value="sun" @click="changeDay($event)">
          Sun
        </ion-segment-button>
      </ion-segment>
      </div>
      <ion-grid> 
        <ion-row>
      <template v-if="today == 'mon'">
        <ion-col size="12" size-md="4" v-for="c in mon">
          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
        </ion-col> 
      </template>
      <template v-if="today == 'tue'">
        <ion-col size="12" size-md="4" v-for="c in tue">
          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
        </ion-col> 
      </template>
      <template v-if="today == 'wed'">
        <ion-col size="12" size-md="4" v-for="c in wed">
          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
        </ion-col> 
      </template>
      <template v-if="today == 'thu'">
        <ion-col size="12" size-md="4" v-for="c in thu">
          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
        </ion-col> 
      </template>
      <template v-if="today == 'fri'">
        <ion-col size="12" size-md="4" v-for="c in fri">
          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
        </ion-col> 
      </template>
      <template v-if="today == 'sat'">
        <ion-col size="12" size-md="4" v-for="c in sat">
          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
        </ion-col> 
      </template>
      <template v-if="today == 'sun'">
        <ion-col size="12" size-md="4" v-for="c in sun">
          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
        </ion-col> 
      </template>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, IonSegment, IonSegmentButton, onIonViewWillEnter, IonGrid, 
IonRow, IonCol, IonButton, IonButtons, useIonRouter } from '@ionic/vue';
import { home, heart, pin, star, call, globe, basket, barbell, trash, person, search } from 'ionicons/icons';
import ExploreContainer from '@/components/ExploreContainer.vue';
import CourseSchedule from '@/components/CourseSchedule.vue';
import { ref } from 'vue';

import { getTodayProgs, isLogin } from '@/composable/settings';

const today = ref()
const weekday = ["sun","mon","tue","wed","thu","fri","sat"];
const mon = ref()
const tue = ref()
const wed = ref()
const thu = ref()
const fri = ref()
const sat = ref()
const sun = ref()
const ionRouter = useIonRouter();

onIonViewWillEnter( async () => {
  const d = new Date();
  console.log(" d ", d.getDay())
  let v = await isLogin()
  console.log("v === ", v)
  if( v == false ) {
    ionRouter.navigate('/tabs/tab4', 'forward', 'replace');
  }
  today.value = weekday[d.getDay()];
  mon.value = await getTodayProgs("mon")
  tue.value = await getTodayProgs("tue")
  wed.value = await getTodayProgs("wed")
  thu.value = await getTodayProgs("thu")
  fri.value = await getTodayProgs("fri")
  sat.value = await getTodayProgs("sat")
  sun.value = await getTodayProgs("sun")

  
  //today.value = 'mon';
})

const changeDay = (e) => {
  today.value = e.target.value
}
</script>
