let CancelToken = axios.CancelToken;
  let cancel;
  export default {
    data () {
      return {
        messages: [],
        chatHiddenName: null,
        chatId: null
      }
    },
    mounted () {
      EventBus.$on('CHAT_CLICKED', chat => {
        console.log('chat clicked - chat message', chat)
        this.messages = []
        this.chatId = chat.id
        this.chatHiddenName = chat.hidden_name
        if (cancel !== undefined) {
          cancel();
        }
        this.fetchMessages()

        // this.chat = chat
      })
    },
    methods: {
      fetchMessages () {
        console.log('FETCHING MESSAGES WITH CHAT ID', this.chatId)
        axios.get(this.$parent.messagesendpoint, {
          cancelToken: new CancelToken(function executor(c) {
            // An executor function receives a cancel function as a parameter
            cancel = c;
          }),
          params: {
            chat_id: this.chatId,
            page: 1,
            count: 10,
          }
        }).then(response => {
          // console.log(response)
          let messages = []
          // console.log(messages,this.chatHiddenName,chatId)

          response.data.forEach(message => {
            // add direct and color of message bubble
            message.direction = {
              // add offset if user message != of user chat
              'offset-md-5': message.hidden_name !== this.chatHiddenName
            }
            message.color = {
              'left': message.hidden_name === this.chatHiddenName,
              'right': message.hidden_name !== this.chatHiddenName,
            }
            messages.push(message)
          })
          this.messages = messages

        }).catch(error => {
          console.log(error)
        }).then(() => {
          setTimeout(this.fetchMessages(), 500)
        })
      }
    }
  }