<template lang='pug'>
  v-container(grid-list-md)
    v-layout(column )
      v-flex
        v-card
          v-card-title
            h3 Lambda Hook Instructions
          v-card-text(class="pa-0")
            v-stepper(v-model="stepNumber" class="elevation-0")
              v-stepper-header
                template(v-for="(step,index) in steps")
                  v-divider(v-if='index>0')
                  v-stepper-step(
                    :key="index"
                    :step="index+1"
                    :complete="stepNumber>index") {{step.title}}
                      small(v-if="step.optional") optional
              v-stepper-items
                v-stepper-content(
                  v-for="(step,index) in steps"
                  :key="index"
                  :step="index+1")
                  v-card
                    v-card-text
                      .headline.text-xs-center {{step.title}}
                      span(v-html="step.text")
                    v-card-actions
                      v-btn(v-for="(y,x) in step.buttons"
                        :id="y.id"
                        :key="x"
                        :loading="y.loading"
                        @click="copy(y)") {{y.text}}
                    v-card-actions
                      v-spacer
                      v-btn(@click="stepNumber--" v-if="index>0" ) back
                      v-btn(@click="stepNumber++" v-if="index+1<steps.length") next
</template>

<script>
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0

var Vuex=require('vuex')
var Promise=require('bluebird')
var markdown=require('marked')

import hljs from 'highlight.js/lib/core';
import javascriptlang from 'highlight.js/lib/languages/javascript';
import pythonlang from 'highlight.js/lib/languages/python';
import jsonlang from 'highlight.js/lib/languages/json';
hljs.registerLanguage('javascript', javascriptlang);
hljs.registerLanguage('python', pythonlang);
hljs.registerLanguage('json', jsonlang);

markdown.setOptions({
  highlight: function (code) {
    return hljs.highlightAuto(code).value;
  }
});
var renderer=new markdown.Renderer()
renderer.link=function(href,title,text){
  return `<a href="${href}" title="${title}" target="_blank">${text}</a>`
}
var handlebars=require('handlebars')
var clipboard=require('clipboard')
var _=require('lodash')

module.exports={
  data:function(){
    var self=this
    return {
      visible:false,
      stepNumber:1,
      prefix:"qna",
      stepsRaw:require('./steps.js')
    }
  },
  components:{
  },
  computed:Object.assign(
    Vuex.mapState([
        'bot'
    ]),

    {
    steps:function(){
      var self=this
      return _.map(this.stepsRaw,function(x){
        var temp=handlebars.compile(x.text)
        var y=Object.assign({},x)
        y.text=markdown.parse(temp(self.$store.state.bot),{renderer})
        return y
      })
    }
    }
  ),
  created:function(){
    var self=this
    this.$store.dispatch('data/botinfo').catch(()=>null)
    var role=new clipboard('#Role',{
      text:function(){
        return self.$store.state.bot.lambdaRole
      }
    })
    var codeJS=new clipboard('#code-js',{
        text:function(){
          return require('raw-loader!./code.js')
        }
    })
    var codePY=new clipboard('#code-py',{
        text:function(){
          return require('raw-loader!./code.py')
        }
    })
    var request=new clipboard('#request',{
        text:function(){
          return JSON.stringify(require('./example'),null,2)
        }
    })
  },
  methods:{
    copy:function(btn){
      btn.loading=true
      setTimeout(()=>btn.loading=false,1000)
    }
  }
}
</script>