// src/main.js
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import i18n from '@/plugins/i18n';
import FlagIcon from 'vue-flag-icon'
import VueSession from 'vue-session'
import VueClipboard from 'vue-clipboard2'
import sharedMutations from 'vuex-shared-mutations'
import VueWait from 'vue-wait'
import axios from 'axios'
import VueAxios from 'vue-axios'
// import reactiveStorage from "vue-reactive-storage"

Vue.use(VueWait);
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  plugins: [createPersistedState(), sharedMutations({ predicate: ['increment', 'decrement'] })],
  mutations: {
    increment(state) {
        state.count++
    },
    decrement(state) {
        state.count--
    },
    increment2(state) {
      state.count += 2;
    }
  }
});
Vue.use(VueSession)
Vue.use(FlagIcon)
Vue.use(VueClipboard)
Vue.use(VueAxios, axios)

Vue.config.productionTip = false

import router from './router/'


var vm = new Vue({
  router,
  store,
  i18n,
  wait: new VueWait(),
  render: h => h(App)
})
vm.$mount('#app')

// export const vueInstance = vm

// src/components/TestComponents.vue
<template lang="html">
  <div class="">
    <div class="vuex-persistedstate mt-5 mb-5">
      <h1>Сохранение state приложения (vuex-persistedstate)</h1>
      <p>{{ count }}</p>
        <p>
            <button @click="increment">+</button>
            <button @click="decrement">-</button>
        </p>
        <small>
        Check out your localStorage to see the updates.
      </small>
    </div>
    <div class="vuex-shared-mutations mt-5 mb-5">
      <h1>vuex-shared-mutations</h1>
      <h1>{{ $store.state.count }}</h1>
          <button @click="$store.commit('decrement');">-</button>
          <button @click="$store.commit('increment');">+</button>
          <button @click="$store.commit('increment2');">+2</button>
          <hr>
          <p>
            Open this example in
            <a
              href="/"
              target="_blank"
            >multiple</a>
            tabs and play with
            <b>+</b>,
            <b>-</b>, and
            <b>+2</b> buttons.
          </p>
          <p>
            <b>+</b> and
            <b>-</b> mutations are shared using
            <a
              href="https://www.npmjs.com/package/vuex-shared-mutations"
              target="_blank"
            >vuex-shared-mutations</a>, so the value will be in sync while you're using these buttons
          </p>
          <p>
            <b>+2</b> mutation, however, is not shared, so you can put your tabs
            out-of-sync. This is intentional, we're sharing
            <b>mutations</b>, not entire
            system state
          </p>
          <hr>
          <p>
            <a href="https://github.com/xanf/vuex-shared-mutations/tree/master/examples/simple">Demo source</a>
          </p>
    </div>
    <div class="vuex-loading mt-5 mb-5">
      <h1>vuex-loading</h1>
      <v-wait for="my list is to load">
          <template slot="waiting">
            <div>
              Loading the list...
            </div>
          </template>
          <div class="binary-tree-container">
              <div class="wrapped-binary-container">
                  <TreeChart :json="treeDataUser" />
              </div>
          </div>
          <button @click='load'>Load list again.</button>
        </v-wait>
    </div>
  </div>
</template>

<script>
import TreeChart from "./network-tree/TreeChart"
import JQuery from 'jquery'
import 'jquery.cookie'
import axios from 'axios'

let $ = JQuery

export default {
  data() {
      return {
        testStr: '',
        treeDataUser: null,
        postBody: '',
        mockData: localStorage.getItem('binary_data')
      }
  },
  components: {
    TreeChart
  },
  computed: {
      count() {
        return this.$store.state.count;
      }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    },
    async load() {
          // start waiting
          this.$wait.start('my list is to load');

          this.treeDataUser = await new Promise(resolve => {
            setTimeout(() => resolve(JSON.parse(this.mockData)), 5000);
          });

          // stop waiting
          this.$wait.end('my list is to load');
      }
},

  mounted() {
    let access_token = $.cookie('access_token')
    console.log(access_token)
    let email = $.cookie('email')
    console.log(email)
    let tablename = 'actual_binary_tree'
    let json = "{}"

    let formData = new FormData()

    formData.append('access_token', access_token)
    formData.append('email', email)
    formData.append('name', tablename)
    formData.append('data', json)
    console.log(formData)

    axios.post('https://api.leonardo.fund/get', formData,
    {headers: {
          'Content-type': 'application/x-www-form-urlencoded',
    }})
    .then((response) => {
     console.log(JSON.stringify(response))
    })
    .catch((error) => {
     console.log(error)
    });

      this.load();
    }
}
</script>

<style lang="css" scoped>
.binary-tree-container {
    width: 100%;
}
.wrapped-binary-container {
    overflow-x: scroll;
    display:flex;
    justify-content: center;
}
</style>