<template>
  <div>
    <span class="coinclass">Meine Münzen: {{ currentCoins }}
    </span>
    <img src="@/assets/logo/coins.png" class="coinsimg">
    <div class="app-container chatbot-container">
      <img src="@/assets/joe.png" class="joeimage">
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Chatbot',
  components: { },
  data() {
    return {}
  },
  computed: {
    ...mapGetters([
      'currentCoins'
    ])
  },
  mounted: () => {
    let host = 'https://joinbot.tk/bot'
    let stylesheetdir = '/bot/assets/modules/channel-web/chat.css'
    if (process.env.NODE_ENV === 'development') {
      host = 'http://localhost:3000'
      stylesheetdir = '/assets/modules/channel-web/chat.css'
    }

    window.botpressWebChat.init({ host: host, botId: 'joinbot', enableReset: false,
      enableTranscriptDownload: false,
      hideWidget: true,
      extraStylesheet: stylesheetdir,
      botName: 'Jo'
    })
    setTimeout(() => {
      window.botpressWebChat.sendEvent({
        type: 'show',
        channel: 'web'
      })
      // window.botpressWebChat.sendEvent({ type: 'message', text: 'Hallo!' })
    }, 1500)
  },
  beforeDestroy: () => {
    document.getElementById('bp-widget').parentElement.removeChild(document.getElementById('bp-widget'))
  },
  methods: {
    messageEventHandler(event) {
      console.log('Message handler')
      console.log(event.message)
    }
  }
}
</script>

<style lang="scss" scoped>

.coinclass {
  height: 70%;
  margin-left: 50px;
padding-bottom:5px;
  font-weight: bolder;
}

.coinsimg{
  height: 28px;
  margin-bottom: -6px;
  margin-top: 40px;
  padding-right: 10px;
}

.chatbot-container {
 /* margin: 50px;*/
  display: flex;
  flex-wrap: wrap;
  .document-btn {
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    margin-bottom: 16px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }

  .joeimage{
    float:left;
    height:600px;
  }
}
</style>
<style>
#bp-widget {
bottom: 0px;
right: 0px;
width: 70%;
height: 100% !important;
}

#bp-web-widget {
width:100%;
height:100%
}
</style>
