<template>
  <div >
    <div class="sign-in-container">
      <form-logo :logoUrl="logoUrl" />
      <login-fail v-show="hasError" />
      <br>
      <form
        class="mds-form mds-form--medium-layout"
        novalidate
        name="loginForm"
        method="post"
        action="form/preprocessor"
        onsubmit="return false"
      >
        <fieldset class="mds-form__fieldset">
          <legend class="mds-form__legend">Login Information fields</legend>
          <input-field
            v-for="group in formInputs"
            :id="group.id"
            :key="group.id"
            v-model="$data[group.id]"
            :error="group.error"
            :title="group.title"
            :type="group.type"
            :described="group.described"
            :v="$v[group.id]"
            @handleShowPassword="handleShowPassword"
          />
          <login-controls
            :disable-login-btn="!disableLoginBtn"
            :user-name="this.$mwc.settings.useEmail ? emailInput : userNameInput"
            :password="passwordInput"
            :reset-password-url="resetPasswordUrl"
            @handleFailedInputs="handleFailedInputs"
          />
        </fieldset>
      </form>
    </div>
<!--    <div class="mds-layout-grid">-->
<!--      <div class="mds-layout-grid__row">-->
<!--        <div class="mds-layout-grid__col question-text">-->
<!--          Do you Have Questions ?-->
<!--        </div>-->
<!--      </div>-->
<!--    <div class="mds-layout-grid__row">-->
<!--      <div class="mds-layout-grid__col email-support-team">-->
<!--      <mds-button variation="flat">-->
<!--        <mds-link href="mailto:abulrahman.Alzahrani@morningstar.com">Email the Support Team</mds-link>-->
<!--      </mds-button>-->
<!--      </div>-->

<!--      <div class="mds-layout-grid__col">-->
<!--      <mds-button class="contact-info-btn" variation="flat">-->
<!--        <mds-link href="#">View Contact Information</mds-link>-->
<!--      </mds-button>-->
<!--      </div>-->
<!--    </div>-->
<!--    </div>-->
  </div>
</template>
<script>
import { validationMixin } from 'vuelidate'

import util from './util/formsFields'

import FormLogo from './FormLogo'
import InputField from './InputField'
import LoginControls from './LoginControls'
import LoginFail from './LoginFail'

export default {
  name: 'LoginForm',
  mixins: [validationMixin],
  inject: ['mwcId'],

  created () {
    this.$mwcRegister(this)
    this.injectedInputsConfig = util.fields(this.$mwc.labeller)
  },

  validations: util.validations,

  components: {
    FormLogo,
    InputField,
    LoginControls,
    LoginFail
  },

  props: {
    isEmail: { type: Boolean, default: true },
    logoUrl: { type: String, default: '' },
    errorText: { type: String },
    resetPasswordUrl: { type: String, default: '' }
  },
  data () {
    return {
      emailInput: '',
      passwordInput: '',
      userNameInput: '',
      loginNotValid: false, // shows error
      injectedInputsConfig: []
    }
  },

  computed: {

    hasError () {
      return (this.errorText)
    },

    disableLoginBtn () {
      return (this.$mwc.settings.useEmail
        ? util.comparingMethod.email(this.$v)
        : util.comparingMethod.userName(this.$v))
    },

    formInputs () {
      let controls = []
      controls = this.isEmail
        ? this.injectedInputsConfig.filter(item => item.type === 'email' || item.id === 'passwordInput')
        : this.injectedInputsConfig.filter(item => item.type !== 'email' || item.id === 'passwordInput')
      return controls
    }
  },

  methods: {

    handleFailedInputs (failed) {
      this.loginNotValid = failed
    },

    handleShowPassword () {
      this.formInputs[1].type = this.formInputs[1].type === 'password'
        ? 'text'
        : 'password'
    }
  }
}
</script>
