<template>
  <div class="sign-in-wrap mds-layout-grid">
    <span
      style="display:none"
      v-html="
             require(`!svg-inline-loader!../../../node_modules/morningstar-design-system/dist/mds.svg`)">
    </span>
    <div class="mds-layout-grid__col">
      <login-form
        :class="{ 'is-rtl-language-type': this.$mwc.labeller.languageId === 'ar'}"
        :isEmail="this.settings.useEmail"
        :logoUrl="this.settings.logoUrl"
        :errorText="(this.settings.errorText)"
        :resetPasswordUrl="this.settings.resetPasswordUrl"
      />
    </div>
  </div>
</template>
<script>
import { MDSLabel, MDSInput, MDSButton, MDSCheckbox, MDSLink } from '../imports'
// MWC helpers
import translations from './translations'
import LoginForm from './LoginForm.vue'
// CMD components

export default {
  name: 'app3',
  props: {
    mwcId: {
      type: String,
      required: true
    },
    config: {
      type: [String, Object],
      default: () => ({})
    }
  },
  data () {
    return {
      injectedConfigTemp: this.config,
      injectedConfiguration: {},
      settings: {},
      defaultConfig: {
        settings: {
          intlNamespace: this.mwcId,
          useEmail: true,
          logoUrl: 'http://designsystem.morningstar.com/images/sandbox/sample-pages/mstar-logo.svg',
          languageId: 'en',
          errorText: '',
          resetPasswordUrl: ''
        },
        labels: translations
      }
    }
  },
  provide () {
    return [
      'mwcId',
      'eventBus'
    ].reduce((provider, obj) => {
      Object.defineProperty(provider, obj, {
        enumerable: true,
        get: () => this[obj] || this[`$_${obj}`]
      })

      return provider
    }, {})
  },
  beforeUpdate () {
    const componentConfig = typeof this.injectedConfigTemp === 'string'
      ? JSON.parse(`${this.injectedConfigTemp}`)
      : this.injectedConfigTemp
    this.settings = componentConfig.settings
  },
  created () {
    this.eventBus = new Vue({})
    this.eventBus.$on('signInRequested', value => {
      this.$emit('signInRequested', value)
    })
    this.eventBus.$on('toggleRememberMe', () => {
      console.log('toggled')
      this.$emit('toggleRememberMe')
    })
    this.eventBus.$on('showPassword', () => {
      console.log('showPassword')
      this.$emit('showPassword')
    })
    this.$mwcRegister(this)
  },
  beforeMount () {
    const componentConfig = typeof this.injectedConfigTemp === 'string'
      ? JSON.parse(this.injectedConfigTemp)
      : this.injectedConfigTemp

    if (
      window.mwc &&
                window.mwc.configuration &&
                window.mwc.configuration.getConfig
    ) {
      this.injectedConfiguration = window.mwc.configuration.getConfig(
        this.mwcId,
        this.defaultConfig,
        componentConfig
      )
    } else {
      this.injectedConfiguration = { ...this.defaultConfig, ...componentConfig }
    }

    this.settings = this.injectedConfiguration.settings
    this.value = this.settings.startingValue
  },

  components: {
    LoginForm
  },
  watch: {
    config: {
      handler: function (newConfig) {
        this.injectedConfigTemp = newConfig
      },
      deep: true
    }
  }
}
</script>
<style>
  @import '../../../node_modules/morningstar-design-system/dist/mds.css';
  @import '../../../src/assets/styles/global.scss';
</style>
