<template>
 <div class="hello container">
    <div v-for="tweet in msg">
      <div class="card">
        <div class="card-image">
          <figure class="image is-128x128px">
            <img :src="tweet.image">
          </figure>
        </div>

        <div class="card-content">
          <div class="media">
            <div class="media-left">
              <figure class="image is-48x48">
                <img src="http://bulma.io/images/placeholders/96x96.png">
              </figure>
            </div>
            <div class="media-content">
              <p class="title is-4">John Smith</p>
              <p class="subtitle is-6">@johnsmith</p>
            </div>
          </div>
        </div>

      <div class="content">
        {{tweet.text}}
        <br>
        <small>{{tweet.date_created}}</small>
      </div>

      <footer class="card-footer">
        <a class="card-footer-item" :id="tweet.id" @click="deletePost($event)">
          Delete
        </a>
      </footer>
    </div>
      <br> <br>
  </div>

  <br><br>


  <div class="field">
    <form enctype="multipart/form-data" v-on:submit.prevent="makePost" method="POST">
      <p class="control">
        <input class="input is-hovered" type="text" ref="postTitle" placeholder="Title" />
      </p>
          <br>
      <p class="control">
        <textarea class="textarea is-hovered" ref="postText" placeholder="What's up?">
        </textarea>
      </p>
          <br>

        <input type="file" @change="onFileChange" accept="image/*">
        </input>

        <button class="button is-primary" type="submit">Submit</button>

        <div>
          <img :src="this.img" />
        </div>
    </form>
  </div>
 </div>
</template>

<script>
import axios from 'axios';



const BASE_URL = 'http://localhost:8000/tweets/';

export default {
  name: 'hello',
  data () {
    return {
      msg: [],
      info: '',
      img: '',
    }
  },

  computed: {


  },

  methods: {

    //invoked when input receives a file and puts the formData into
    //the info property inside the data object
    //Also calls createdImage() with the file as a parameter
    onFileChange(event) {
        event.preventDefault();
        const files = event.target.files || event.dataTransfer.files;
        const formData = new FormData();

        formData.append('title', this.$refs.postTitle.value);
        formData.append('text', this.$refs.postText.value);
        formData.append('image', files[0]);

        this.createdImage(files[0]);

        return this.info = formData

    },

     //takes in the first file from onFileChange() and returns the image which is used
     //to preview the image inside a div
    createdImage(file) {
      //const image = new Image();
      const reader = new FileReader();

      reader.onload = (e => {
        return this.img = e.target.result;
      });

      return reader.readAsDataURL(file);


    },

    //resets info inside the data object
    reset() {
      this.info = '';
    },

    //makes a post request using the formData in this.info inside the data object
    makePost() {
      axios.post(BASE_URL, this.info).then(response => {
          console.log(response);
          this.reset();
          window.location.href="http://localhost:8080";
       }).catch(err => { console.log(err) })
    },

    //delete request using the :id of the event
    deletePost(event) {

      const targetID = event.currentTarget.id;

      axios.delete(`${BASE_URL}${targetID}/`).then(res => {
        console.log(res);
        window.location.href="http://localhost:8080";
      });
    },


  },

  //when mounted, makes an API call to DjangoRestFramework backend
  mounted() {
    axios.get(BASE_URL).then(response => {this.msg = response.data});
  },



}


</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="css">
</style>