<template>
  <card class="card-user" style="max-height:100%">

      <div class="author">
        <img class="avatar border-white" src="@/assets/img/book.png" alt="..."
             v-if="hybridshow=='asciidoc'"
        >
        <img class="avatar border-white" src="@/assets/img/code-128.png" alt="..."
             v-if="hybridshow=='asciinema'"
        >
        <img class="avatar border-white" src="@/assets/img/video1.png" alt="..."
             v-if="hybridshow=='video'"
        >
      </div>
  <v-wait for="myRunInstancetutor">
    <template slot="waiting">
      <div>
        <img src="@/assets/loading.gif" />
        Enter Lab_room...
      </div>
    </template>
  </v-wait>

      <b-container fluid>
          <div class="row text-center"
             v-if="hybridshow=='asciinema'"
          >

            <div class="col-12">
            <b>Copy & Paste</b> 
            <br>
            Any time you see a command you'd like to try in your own terminal just pause the player  <br> and copy-paste the content you want.
            </div>
            <div class="col-12">
	<iframe 
		id="llo"
		title="title"
		width="600"
		height="700"
		:src="asciinemasource"
		allowfullscreen
		frameborder="0"
		>
	</iframe>
<!--
              <aplayer
               :llo="llo"
               :course="course"
              >
              </aplayer>
-->
            </div>
          </div>

          <div class="row text-center"
             v-if="hybridshow=='video'"
          >
          <iframe 
            @load="dofin()"
            id="llo"
            width="740"
            height="500"
            :src="sourcevimeo"
            allowfullscreen
            frameborder="0"
            >
          </iframe>
          </div>

          <div class="row text-center"
             v-if="hybridshow=='asciidoc'"
          >
            <div class="col-12">
	<iframe 
		id="lloasciiview1"
		title="title"
		width="100%"
		height="700"
		:src="asciidocurl"
		frameborder="0"
		>
	</iframe>
            </div>
          </div>

          <div class="row text-center"
             v-if="hybridshow=='penguin'"
          >
            <div class="col-12">
              <img src="@/assets/img/penguin21a.png" width="400" height="400">
            </div>
          </div>
   </b-container>
<hr>
   <b-container fluid class="bv-example-row"
      v-if="hybridshow!='penguin'"
   >
         <div class="row text-center"
            <div class="col-12">
		          <div class="input-group input-group-sm sm-3">
              <select 
              v-on:change="oncompletiontracking()"
                class="custom-select custom-select-sm" v-model="completiontracking">
                      <option value="0" selected>Completion tracking</option>
                      <option value="1">Completed</option>
                      <option value="2">Almost</option>
                    </select>
              <select 
              v-on:change="oncompletiontracking()"
                class="custom-select custom-select-sm" v-model="courseread">
                      <option value="0" selected>Did you find this helpful?</option>
                      <option value="1">No</option>
                      <option value="2">Not really/A bit</option>
                      <option value="3">Yes</option>
                    </select>
               </div>
           </div>
         </div>
      </b-container>

  </card>
</template>
<script>
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import card from '@/components/Card.vue'
import aplayer from '@/components/asciiplayer.vue'
//import asciidoc from '@/components/asciidoc.vue'
import Asciidoctor from 'asciidoctor'
import {ApiConfig} from "@/config/index";
export default {
  components: {
  //    asciidoc,
      aplayer,
      card
	},
  props: {},
  data() {
   return{
    vtype:'', // tmp save for hybridshow
    completiontracking:0,
    courseread:0,
    hybridshow:'penguin',
    llo:'',
    llocourse:'',
    llochapter:'',
    asciidocurl:'',
    asciidoccode:'',
    course:'',
    asciinemasource:'',
    coursevimeo:'',
    hybridcourse:'',
    token: '',
		}
  },
	mounted() {
		this.$root.$on('hybrid_llo_viecourse', (v) => {
            this.completiontracking = 0
            this.courseread = 0
            this.llocourse = v.llo
            this.llochapter = v.course
            if(v.type == 'asciinema'){
              this.hybridshow = v.type
              this.llo = v.llo
              this.course = v.course
              this.asciinemasource = `http://localhost:3080/player/aplayer.html?llo=${this.llo}&item=${this.course}`
              this.getcompletion()
            }else if(v.type == 'asciidoc'){
              this.asciidoccode = v.code
              this.vtype = v.type // save for later use after addlloascii finish
              this.addlloascii()
              this.getcompletion()
            }else if(v.type == 'video'){
              this.$wait.start('myRunInstancetutor');
              this.hybridshow = v.type
              this.sourcevimeo=`https://player.vimeo.com/video/${v.course}`
              this.getcompletion()
            }
		})
	},
	created() {
    var url_string = window.location.href
    var url = new URL(url_string);
    this.token = url.searchParams.get("token");
    console.log("token "+ this.token);

	},
    beforeDestroy () {
		this.$root.$off('hybrid_llo_viecourse')
		//this.$root.$off('hybrid_refresh_table')
 },
  computed: {
	},

  methods: {
        async getcompletion() {
           var value = {}
           value.token = this.token
              value.course = this.llocourse
              value.chapter = this.llochapter
          var res1 = await store.dispatch('pipelineLLO/getcompletion', value)
          //console.log('params '+JSON.stringify(res1))
          if(res1.data.action == 'ok'){
             this.completiontracking = res1.data.data.track
             this.courseread = res1.data.data.evaluation
          }
           
        },
        async oncompletiontracking() {
           var value = {}
              value.token = this.token
              value.action = 'track'
              value.track = this.completiontracking
              value.evaluation = this.courseread
              value.course = this.llocourse
              value.chapter = this.llochapter
          var res1 = await store.dispatch('pipelineLLO/oncompletiontracking', value)
          this.$root.$emit('hybrid_progress_refresh')
        },
        dofin() {
         console.log(" dofin  ")
              this.$wait.end('myRunInstancetutor');
        },
         async addlloascii() {
           var value = this.asciidoccode
                  console.log(" ascii code 2  "+JSON.stringify(this.code))

            try{
               var asciidoctor1 = Asciidoctor()
                     var value_compiled = asciidoctor1.convert(value,
                        {
                        standalone: true,
                        backend: 'html5', 
                        header_footer: false,
                        doctype: 'article',
                        safe: 'safe',
                        attributes: {
                          'source-highlighter': 'highlightjs',
                          //'toc':'right',
                          //'sectnumlevels':4,
                          //'no-header-footer':true,
                          //'last-update-label':true,
                          'sectnums':true,
                          'icons': 'font',
                          'copycss':true,
                          'stylesheet': 'http://cdnjs.cloudflare.com/ajax/libs/asciidoctor.js/1.5.9/css/asciidoctor.min.css',
                          'iconfont-cdn': 'http://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css',
                          'iconfont-name': 'fontawesome-5-14.0',
                          'iconfont-remote':true,
                          'linkcss': true
                          }
                        }) // (2)

                  console.log(" ascii  "+JSON.stringify(value_compiled))

var llosave = await store.dispatch('pipelineLLO/save_llo_asciidoctmp', value_compiled)

console.log('no write permission 1 '+ JSON.stringify(llosave))
if(llosave.data == 'nofile'){
console.log('no write permission')
}else{
this.asciidocurl = `http://localhost:3080/asciidoc/${llosave.data.data}.html?token=${this.token}`
console.log('no write permission 2 '+ JSON.stringify(this.asciidocurl))
this.hybridshow = 'no'
this.hybridshow = this.vtype
}


              }catch (ex) {
                  console.log(" ascerror "+JSON.stringify(ex))
                  return
              }


        }


  },


  actions: {


	}

};
</script>
<style>
.flex-fixed-width-item {
    flex: 0 0 100px;
		}
.modalinfo {
  z-index: 10000000 !important;
	position:fixed;
}
/* a container with flex-direction column */

.vue-notifyjs.notifications{
  .alert{
   z-index: 100;
  }
  .list-move {
    transition: transform 0.3s, opacity 0.4s;
  }
  .list-item {
    display: inline-block;
    margin-right: 10px;

  }
  .list-enter-active {
    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
  }
  .list-leave-active {
    transition: transform 1s ease-out, opacity 0.4s ease-out;
  }

  .list-enter {
    opacity: 0;
    transform: scale(1.1);

  }
  .list-leave-to {
    opacity: 0;
    transform: scale(1.2, 0.7);
  }
}

pre {
  //background-color: rgb(255, 247, 229);
  background-color: #eff0f1;
	  border: 1px solid blue;
		  //white-space: pre-line;
			}

</style>
