<template>
    <div>
        <b-container fluid>
            <b-row>
                <b-col>
                    <Editor :content="content" />
                </b-col>
            </b-row>
            <b-row>
                <b-col cols="10">
                    <label for="tagList">Tags</label>
                </b-col>
            </b-row>
            <b-row>
                <b-col cols="10">
                    <TagList id="tagList" :tags="tags" />
                </b-col>
                <b-col cols="1">
                    <b-button variant="primary">Save</b-button>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
  import Editor from "./Editor";
  import TagList from "./TagList";
  export default {
    name: "MainEditor",
    props: {
      slug: String
    },
    created() {
      if (this.$props.slug) {
        this.getFile(this.$props.slug)
      }
    },
    data: function () {
      return {
        file: ''
      }
    },
    computed: {
      tags: function() {
        if (this.file) {
          return this.file.tags
        }
        return []
      },
      content: function () {
        console.log('file:' + this.file)
        if (this.file) {
          return this.file.contents
        }
        return "= Main Editor"
      }
    },
    watch: {
      slug: function (newValue) {
        this.getFile(newValue)
      }
    },
    methods: {
      getFile: function(slug) {
        this.$store.dispatch('getFile', slug)
          .then(file => {
            this.file = file
          })
      }
    },
    components: {TagList, Editor}
  }
</script>

<style scoped>

</style>