<template lang="html">
  <UserTools v-if="isloggedin" />
  <LoginBlock v-bind:title="title" v-bind:block="block" v-else/>
</template>

<script>
import { mapState, mapActions } from 'vuex'

import LoginBlock from 'vuejs/components/Block/LoginBlock'
import UserTools from 'vuejs/components/User/UserTools'

import { MA } from 'vuejs/api/ma-axios'

export default {
  props: ['title', 'loginblock'],
  data(){
    return {
      block: null
    }
  },
  computed: {
    ...mapState({
      isloggedin: state => state.User.isloggedin
    })
  },
  beforeMount() {
    console.log('UserBlock beforeMount');
    if(this.loginblock){
      this.block = this.loginblock
    }else{
      this.getLoginBlock()
    }

  },
  methods: {
    getLoginBlock(){
      MA.get(`/materio_user/login_block`)
        .then(({data}) => {
          // console.log("getLoginBlock data", data);
          this.block = data.rendered
        })
        .catch(( error ) => {
          console.warn('Issue with getLoginBlock', error)
        })
    }
  },
  components: {
    LoginBlock,
    UserTools
  }
}

</script>

<style lang="css" scoped>

</style>