<input-tag :input_class="'form-control'" @update:tags="tags" :placeholder="'e.g. post, black'"></input-tag>

require('./bootstrap-admin');

var dt = require('datatables.net');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('droppable', require('./components/Droppable.vue'));
Vue.component('administrators', require('./components/Administrators.vue'));
Vue.component('medialibrary', require('./components/MediaLibrary.vue'))
Vue.component('repeatable', require('./components/Repeatable.vue'))
Vue.component("searchlister", require("./components/SearchLister.vue"));
Vue.component("input-tag", require("./components/InputTag.vue"));

const app = new Vue({
    el: '#app'
});

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'

// Plugins
import 'tinymce/plugins/paste/plugin'
import 'tinymce/plugins/link/plugin'
import 'tinymce/plugins/autoresize/plugin'

tinymce.init({
    selector: '#content',
    plugins: ['paste', 'link', 'autoresize']
});

import './components/blog/blog'

<script>
/* eslint-disable */
 const validators = {
  email: new RegExp(/^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/),
  url: new RegExp(/^(https?|ftp|rmtp|mms)://(([A-Z0-9][A-Z0-9_-]*)(.[A-Z0-9][A-Z0-9_-]*)+)(:(d+))?/?/i),
  text: new RegExp(/^[a-zA-Z]+$/),
  digits: new RegExp(/^[d() .:-+#]+$/),
  isodate: new RegExp(/^d{4}[/-](0?[1-9]|1[012])[/-](0?[1-9]|[12][0-9]|3[01])$/)
}
/* eslint-enable */

export default {
  name: 'InputTag',

  props: {
    tags: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: ''
    },
    input_class: {
      type: String,
      default: ''
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    validate: {
      type: String,
      default: ''
    },
    addTagOnKeys: {
      type: Array,
      default: function () {
        return [
          13, // Return
          188, // Comma ','
          9 // Tab
        ]
      }
    },
    limit: {
      default: -1
    }
  },

  data () {
    return {
      newTag: '',
      innerTags: [...this.tags]
    }
  },

  watch: {
    tags () {
      this.innerTags = [...this.tags]
    }
  },

  computed: {
    isLimit: function () {
      return this.limit > 0 && Number(this.limit) === this.innerTags.length
    }
  },

  methods: {
    focusNewTag () {
      if (this.readOnly || !this.$el.querySelector('.new-tag')) { return }
      this.$el.querySelector('.new-tag').focus()
    },

    addNew (e) {
      // Do nothing if the current key code is
      // not within those defined within the addTagOnKeys prop array.
      if ((e && this.addTagOnKeys.indexOf(e.keyCode) === -1) || this.isLimit) {
        return
      }

      // We prevent default & stop propagation for all
      // keys except tabs (used to move between controls)
      if (e && e.keyCode !== 9) {
        e.stopPropagation()
        e.preventDefault()
      }

      if (
        this.newTag &&
        this.innerTags.indexOf(this.newTag) === -1 &&
        this.validateIfNeeded(this.newTag)
      ) {
        this.innerTags.push(this.newTag)
        this.newTag = ''
        this.tagChange()
      }
    },

    validateIfNeeded (tagValue) {
      if (this.validate === '' || this.validate === undefined) {
        return true
      } else if (Object.keys(validators).indexOf(this.validate) > -1) {
        return validators[this.validate].test(tagValue)
      }
      return true
    },

    remove (index) {
      this.innerTags.splice(index, 1)
      this.tagChange()
    },

    removeLastTag () {
      if (this.newTag) { return }
      this.innerTags.pop()
      this.tagChange()
    },

    tagChange () {
      this.$emit('update:tags', this.innerTags)
    }
  }
}
</script>

<template>
  <div @click="focusNewTag()" :class="{'read-only': readOnly}" class="vue-input-tag-wrapper">
    <span v-for="(tag, index) in innerTags" :key="index" class="input-tag">
      <span>{{ tag }}</span>
      <a v-if="!readOnly" @click.prevent.stop="remove(index)" class="remove"></a>
    </span>
    <input
      v-if                     = "!readOnly && !isLimit"
      ref                      = "inputtag"
      :placeholder             = "placeholder"
      type                     = "text"
      v-model                  = "newTag"
      v-on:keydown.delete.stop = "removeLastTag"
      v-on:keydown             = "addNew"
      :class                    = "input_class"
      class                    = "new-tag"
    />
  </div>
</template>

<style>
  .vue-input-tag-wrapper {
    background-color: #fff;
    border: 1px solid #ccc;
    overflow: hidden;
    padding-left: 4px;
    padding-top: 4px;
    cursor: text;
    text-align: left;
    -webkit-appearance: textfield;
  }

  .vue-input-tag-wrapper .input-tag {
    background-color: #cde69c;
    border-radius: 2px;
    border: 1px solid #a5d24a;
    color: #638421;
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 4px;
    margin-right: 4px;
    padding: 3px;
  }

  .vue-input-tag-wrapper .input-tag .remove {
    cursor: pointer;
    font-weight: bold;
    color: #638421;
  }

  .vue-input-tag-wrapper .input-tag .remove:hover {
    text-decoration: none;
  }

  .vue-input-tag-wrapper .input-tag .remove::before {
    content: " x";
  }

  .vue-input-tag-wrapper .new-tag {
    background: transparent;
    border: 0;
    color: #777;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 6px;
    margin-top: 1px;
    outline: none;
    padding: 4px;
    padding-left: 0;
  }

  .vue-input-tag-wrapper.read-only {
    cursor: default;
  }
</style>

$(function() {
  /**
   * Preview the blog article
   * @var
   */
  $(document).on('click', '#blog-preview', function() {
    $('#draft').html('');
    $('#preview').html('<input type="hidden" name="preview" value="true">');
    $('#blog-form').submit();
  });

  /**
   * Publish the blog article
   * @var
   */
  $(document).on('click', '#blog-publish', function() {
    $('#draft').html('');
    $('#publish').html('<input type="hidden" name="status" value="publish">');
    $('#blog-form').submit();
  });

  /**
   * submit edited article
   * @return void
   */
  $(document).on('click', '#blog-publish-edit', function() {
    $('#draft').html('');
    $('#publish').html('<input type="hidden" name="status" value="publish">');
    $('#blog-form').submit();
  });

  /**
   * publish draft
   * @return void
   */
  $(document).on('click', '#blog-publish-draft', function() {
    $('#draft').html('');
    $('#publish').html('<input type="hidden" name="status" value="publish">');
    $('#blog-form').submit();
  });

  /**
   * Decided to preview the composed blog
   * @var
   */
  $(document).on('click', '#btn-preview', function() {
    $('#preview').html();
    $('#blog-form').submit();
  });

  /**
   * submit draft
   * @return void
   */
  $(document).on('click', '#btn-draft', function() {
    $('#draft').html('<input type="hidden" name="status" value="draft">');
    $('#blog-form').submit();
  });

  /**
   * Generate slug
   * @return {[type]} [description]
   */
  $(document).on('change', '#title', function() {
    let str = $(this).val();
    str = str.replace(/s+/g, '-').toLowerCase();
    $('#slug').val(str);
  })
});

$("input").val();