import Vue from 'vue';
import Vuex from 'vuex';
import $ from 'jquery';
import Clipboard from 'clipboard';

import { split } from './tweet';

import './css/skeleton.css';
import '../node_modules/hint.css/hint.min.css';
import './css/index.css';

Vue.use(Vuex);

const helpText = `This is a simple app for composing tweetstorms.
--
Write your text here, separating tweets with a line containing only '--'.
--
Click on any tweet on the right to copy it to the clipboard.
--
`;

const store = new Vuex.Store({
  state: {
    text: helpText,
    clipboardText: ''
  },

  getters: {
    tweets: state => {
      return split(state.text)
    }
  },

  mutations: {
    setText(state, text) {
      state.text = text;
    },

    setClipboardText(state, text) {
      state.clipboardText = text;
    }
  }
});

Vue.component('compose', {
  template: '#compose-template',

  data: function() {
    return {
      text: helpText
    }
  },

  methods: {
    handleKeyUp: function(event) {
      this.$store.commit('setText', this.text);
    }
  }
});

Vue.component('tweets', {
  template: '#tweets-template',

  computed: {
    tweets() {
      return this.$store.getters.tweets;
    }
  },

  methods: {
    handleCopy: function(text) {
      this.$store.commit('setClipboardText', text)
    }
  }
});

new Vue({
  el: '#root',
  store
});

const clipboard = new Clipboard('.copy', {
  text: function() {
    return store.state.clipboardText;
  }
});

clipboard.on('success', (e) => {
  let $e = $(e.trigger);

  $e.addClass('hint--right');

  $e.mouseleave(function (e) {
    $e.removeClass('hint--right');
  });
})
@@ -1290,16 +1290,44 @@
  %7D%0A%7D);%0A%0A
+$(document).ready(() =%3E %7B%0A  
 new Vue(
@@ -1328,16 +1328,18 @@
 w Vue(%7B%0A
+  
   el: '#
@@ -1351,19 +1351,25 @@
 ,%0A  
+ 
+ 
 store%0A
+  
 %7D);%0A%0A
+  
 cons
@@ -1403,24 +1403,26 @@
 ('.copy', %7B%0A
+  
   text: func
@@ -1430,24 +1430,26 @@
 ion() %7B%0A    
+ 
+ 
 return store
@@ -1472,23 +1472,29 @@
 Text;%0A  
-%7D%0A
+  %7D%0A  
 %7D);%0A%0A
+  
 clipboar
@@ -1520,16 +1520,18 @@
  =%3E %7B%0A  
+ 
+ 
 let $e =
@@ -1542,24 +1542,26 @@
 .trigger);%0A%0A
+  
   $e.addClas
@@ -1581,16 +1581,18 @@
 t');%0A%0A  
+ 
+ 
 $e.mouse
@@ -1616,16 +1616,18 @@
 ) %7B%0A    
+  
 $e.remov
@@ -1653,12 +1653,20 @@
 ');%0A
+    %7D);%0A
   %7D);%0A%7D)
@@ -1665,8 +1665,10 @@
   %7D);%0A%7D)
+;%0A

Create Vue instance only after document is ready