
<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
          </ion-buttons>
          <ion-title v-if="course">{{ course.name }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large" v-if="course">{{ course.name }}</ion-title>
        </ion-toolbar>
      </ion-header>
        <ion-img :src="course.feature_img" v-if="course" />
        <template v-if="processing">
            <ion-progress-bar type="indeterminate" class='ion-margin-vertical'></ion-progress-bar>
        </template>
        <read-more class='ion-padding' v-if="render_body" more-str="read more" :text="render_body" link="#" less-str="read less" max-chars="200"></read-more>

      <h1 class='ion-padding'>Trainings</h1>
      <ion-grid>
        <ion-row>
          <ion-col size="12" size-md="4" size-lg="2" v-for="c in mats">
            <CourseMat :obj="c" :course-name="course.name" class='ion-no-margin' />
          </ion-col>
        </ion-row>
      </ion-grid>
      <ion-infinite-scroll @ionInfinite="loadMore">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-content>
  </ion-page>
</template>
<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
    IonButton,
    IonButtons,
    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol, IonProgressBar,  IonInfiniteScroll,
    IonInfiniteScrollContent, InfiniteScrollCustomEvent, IonImg  } from '@ionic/vue';
import { useRoute } from 'vue-router';
import { listCourseMats, getCourse, listCourseMatsByLevel, callUrl} from '@/composable/settings';
import { ref } from 'vue';
import CourseMat from '@/components/CourseMat.vue'
import { marked } from 'marked';
import ReadMore from 'vue-read-more/components/ReadMoreComponent.vue';

const route = useRoute();
const { id } = route.params;

const mats = ref([])
const course = ref()
let next_url = null
const processing = ref(false)
const render_body = ref()

onIonViewWillEnter(async () => {
  course.value = await getCourse(id)
  render_body.value = marked(course.value.body)
  processing.value = true
  listCourseMatsByLevel(course.value.clevels).then( (data) => { 
    mats.value = data.results;
    next_url = data.next
    processing.value = false
  })

})
  const loadMore = async (ev: InfiniteScrollCustomEvent) => {
    //setTimeout(() => ev.target.complete(), 500);
    console.log("next url ", next_url)
    if(next_url) {
      let data  = await callUrl(next_url)
      mats.value.push(data.results)
      next_url = data.next
      ev.target.complete()
    }else {
      ev.target.complete()
    }
  };
</script>

<style>
ion-title {
  font-size:1.5rem;
}
#readmore {
  display:block;
  width:100%;
  text-align:center;
  text-transform:capitalize;
  text-decoration:none;
  font-weight:bold;
  background-color:#ccc;
  padding:0.5rem 0;
  color:#333;
}
</style>
