<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Courses</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 :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Courses</ion-title>
        </ion-toolbar>
      </ion-header>
        <template v-if="processing">
            <ion-progress-bar type="indeterminate" class='ion-margin-vertical'></ion-progress-bar>
        </template>
      <ion-grid>
        <ion-row>
          <ion-col size="6" size-md="4" size-lg="2" v-for="c in courses">
            <Course :course-obj="c" class="ion-no-margin" />
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, onIonViewWillEnter, IonProgressBar, IonIcon, IonButtons, IonButton, useIonRouter} from '@ionic/vue';
import { search } from 'ionicons/icons';

import Course from '@/components/Course.vue';
import { ref } from 'vue';

import {listCourses, isLogin} from '@/composable/settings';
const courses = ref([]);
const processing = ref(false);
const ionRouter = useIonRouter();

onIonViewWillEnter(async () => {
  let v = await isLogin()
  console.log("v === ", v)
  if( v == false ) {
    ionRouter.navigate('/tabs/tab4', 'forward', 'replace');
  }

  processing.value = true;
  courses.value = await listCourses()
  processing.value = false;
})
</script>
