<template>
  <div class="message-form">
    <i-form>
      <form-item>
        <i-input
          v-model="message"
          type="textarea"
          placeholder="Enter something..."
          @on-enter="sendTextMessage" />
      </form-item>
      <i-button
        type="primary"
        icon="paper-airplane"
        @click="sendTextMessage">
        Send
      </i-button>
      <upload
        class="upload-button"
        :before-upload="handleFileUpload"
        action="/">
        <i-button type="text" icon="ios-cloud-upload-outline">Upload image</i-button>
      </upload>
    </i-form>
  </div>
</template>

<script>
import iEditor from "iview-editor";

export default {
  components: {
    iEditor
  },
  props: {
    currentRoomId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      message: ""
    };
  },
  methods: {
    sendTextMessage() {
      if (this.message !== "") {
        this.$matrix.client
          .sendTextMessage(this.currentRoomId, this.message)
          .then(() => this.$emit("on-send-message"));
        this.message = "";
      }
    },

    handleFileUpload(file) {
      if (file.type.includes("image")) {
        this.$matrix.client
          .uploadContent(file)
          .then(response =>
            this.$matrix.client.sendImageMessage(this.currentRoomId, response)
          );
      } else {
        this.$Message.error("It is not an image");
      }
      return false;
    }
  }
};
</script>

<style src="iview-editor/dist/iview-editor.css"></style>

<style lang="less">
.message-form {
  .upload-button {
    display: inline-flex;
  }
}
</style>
