<template>
  <div class="app-container chatbot-container">
    <img src="@/assets/joe.png" class="joeimage">
  </div>
</template>

<script>
export default {
  name: 'Chatbot',
  components: { },
  data() {
    return {}
  },
  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>
.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>
