
<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>
      <h1   v-if="obj">{{ obj.name }}</h1>
      <div v-html="obj.embed_html" v-if="obj"></div>
      <div v-html="render_body" class='ion-padding'></div>
       <ion-fab slot="fixed" vertical="bottom" horizontal="end">
      <ion-fab-button v-if="obj">
        <ion-icon :icon="shareSocial" @click="socShare"></ion-icon>
      </ion-fab-button>
    </ion-fab>
    </ion-content>
  </ion-page>
</template>
<style scoped>
  h1 {
    color: var(--ion-color-primary);
  }
</style>
<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')
  if( obj ) {
    await Share.share({
      title: obj.value.name,
      text: obj.value.description,
      url: 'https://www.tigermuaythai.live/posts_detail/'+obj.value.id,
      dialogTitle: 'TigerMuayThai.live',
    });
  }
}
</script>
