
<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
          </ion-buttons>
          <ion-title v-if="obj">{{ obj.name }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large" v-if="obj">{{ obj.name }}</ion-title>
        </ion-toolbar>
      </ion-header>
      <div v-html="render_body" class='ion-padding'></div>

       <ion-fab slot="fixed" vertical="bottom" horizontal="end">
      <ion-fab-button>
        <ion-icon :icon="shareSocial" @click="socShare"></ion-icon>
      </ion-fab-button>
    </ion-fab>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">

import { marked } from 'marked';
import { Share } from '@capacitor/share';

import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
    IonButton,
    IonButtons,
    IonIcon,
    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol,
    IonFab, IonFabButton } from '@ionic/vue';
import {
    chevronDownCircle,
    chevronForwardCircle,
    chevronUpCircle,
    colorPalette,
    shareSocial, 
    document,
    globe,
  } from 'ionicons/icons';

import { useRoute } from 'vue-router';
import { listCourseMats, getCourse, getPost} from '@/composable/settings';
import { ref } from 'vue';
import CourseMat from '@/components/CourseMat.vue'

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

const obj = ref()
const render_body = ref()

onIonViewWillEnter(async () => {
  const post  = await getPost(id)
  console.log(" post ", post)
  obj.value = post
  render_body.value = marked(post.body)

})
const socShare = async () => {
  console.log('share social')
  await Share.share({
    title: 'See cool stuff',
    text: 'Really awesome thing you need to see right meow',
    url: 'http://ionicframework.com/',
    dialogTitle: 'Share with buddies',
  });
}
</script>
