import Vue from 'vue'
import store from 'vuejs/store'
import VUserBlock from 'vuejs/components/User/UserBlock'
import VTestContent from 'vuejs/components/Content/Test'

import { mapState } from 'vuex'

// require('theme/assets/styles/main.scss');
import 'theme/assets/styles/main.scss'

(function(Drupal, drupalSettings) {

  var MaterioTheme = function(){

    var v_user_block, v_test_content;
    // var _is_front = drupalSettings.path.isFront;


    console.log('drupalSettings', drupalSettings);

    //  ___      _ _
    // |_ _|_ _ (_) |_
    //  | || ' \| |  _|
    // |___|_||_|_|\__|
    function init(){
      console.log("MaterioTheme init()")
      initVues()
    }

    function initVues(){
      initUserVBlock()
      initTestVContent()
    }

    function initUserVBlock(){
      let mount_point = drupalSettings.user.uid !== 0 ? '#block-userblock' : '#block-userlogin';
      v_user_block = new Vue({
        store,
        computed: {
          ...mapState({
            isloggedin: state => state.User.isloggedin
          })
        },
        created () {
          if(drupalSettings.user.uid !== 0){
            this.$store.commit('User/setUid', drupalSettings.user.uid)
            this.$store.dispatch('User/getUser')
          }
        },
        render: h => h(VUserBlock)
      }).$mount(mount_point)
    }

    function initTestVContent(){
      v_test_content = new Vue({
        store,
        render: h => h(VTestContent)
      }).$mount('#block-pagetitle')
      console.log('initTestVContent', v_test_content);
    }

    init()
  } // end MaterioTheme()

  var materiotheme = new MaterioTheme();

})(Drupal, drupalSettings);