<template>
  <div class="sign-in-container__controls">
    <div class="sign-in-container__checkbox-buttons">
      <mds-checkbox
        class="checkbox-keep-logged"
        name="checkbox-keep-logged"
        value="accept"
        additional-class="sign-in-container__controls-checkbox__keep-logged"
        @change="handleKeepLogged"
      >
        {{$mwc.$t(`rememberMeText`)}}
      </mds-checkbox>
<!--      //TODO: figure out why not mds-link target blank doesn't work.-->
<!--      <mds-link  v-if="resetPasswordUrl"-->
<!--                 class="link-forgot-password"-->
<!--                 href="/resetPasswordUrl"-->
<!--                 variation="flat"-->
<!--                 target="_blank"-->
<!--      >-->
<!--      Forgot your password ?-->
<!--      </mds-link>-->
      <a :href="resetPasswordUrl" aria-label="Forgot your password ?" target="_blank"
         class="mds-link link-forgot-password">{{$mwc.$t(`forgotPwdText`)}}</a>
    </div>
    <div class="sign-in-container__controls-button">
      <!--      //todo: Check binding issues with the mds team-->
<!--            <mds-button-->
<!--              id="loginButton"-->
<!--              variation="primary"-->
<!--              v-bind:class="{ 'text-float-left': this.$mwc.labeller.languageId === 'ar',
 'text-float-right': this.$mwc.labeller.languageId !== 'ar' }"-->
<!--              :disabled="disableLoginBtn"-->
<!--              @click="validateInput()"-->
<!--            >-->
<!--              {{this.$mwc.labeller.getLabel(`loginText`)}}-->
<!--            </mds-button>-->
      <button
        id="loginButton"
        v-bind:class="{
        'text-float-left': this.$mwc.labeller.languageId === 'ar',
         'text-float-right': this.$mwc.labeller.languageId !== 'ar'
         }"
        class="mds-button mds-button--primary"
        :disabled="disableLoginBtn"
        type="submit"
        text="Login"
        tabindex="0"
      >
        {{$mwc.$t(`loginText`)}}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginControls',

  props: {
    disableLoginBtn: { type: Boolean, default: true },
    userName: { type: String, default: '' },
    password: { type: String, default: '' },
    resetPasswordUrl: { type: String, default: '' }
  },
  data () {
    return {
      isValid: false,
      isRememberMeChecked: false
    }
  },
  inject: ['mwcId', 'eventBus'],
  created () {
    this.$mwcRegister(this)
  },
  methods: {
    // TODO: remove this method below
    handleKeepLogged () {
      this.isRememberMeChecked = !this.isRememberMeChecked
    }
  }
}
</script>
