<template>
  <b-form class="login-form" novalidate @submit.prevent="login">
    <alert class="login-error mb-4" :show="authError" variant="danger">
      <p id="login-error-alert">
        {{ $t('pageLogin.alert.message') }}
      </p>
    </alert>
    <!-- <b-form-group label-for="language" :label="$t('pageLogin.language')">
      <b-form-select
        id="language"
        v-model="$i18n.locale"
        :options="languages"
        data-test-id="login-select-language"
      ></b-form-select>
    </b-form-group> -->
    <b-form-group
      class="bold-24px"
      label-for="auth"
      :label="$t('pageLogin.auth')"
    ></b-form-group>

    <b-form-group
      label-for="auth"
      class="auth-description"
      :label="$t('pageLogin.authDescription')"
    ></b-form-group>

    <b-form-group>
      <label class="regular-12px tretiatry" for="username">{{
        $t('pageLogin.username')
      }}</label>
      <b-form-input
        id="username"
        v-model="userInfo.username"
        aria-describedby="login-error-alert username-required"
        :state="getValidationState($v.userInfo.username)"
        type="text"
        autofocus="autofocus"
        data-test-id="login-input-username"
        class="form-control-with-button username-input"
        @input="$v.userInfo.username.$touch()"
      >
      </b-form-input>
      <b-form-invalid-feedback id="username-required" role="alert">
        <template v-if="!$v.userInfo.username.required">
          {{ $t('global.form.fieldRequired') }}
        </template>
      </b-form-invalid-feedback>
    </b-form-group>

    <b-form-group>
      <input-password-toggle>
        <label class="regular-12px tretiatry" for="password">{{
          $t('pageLogin.password')
        }}</label>
        <b-form-input
          id="password"
          v-model="userInfo.password"
          aria-describedby="login-error-alert password-required"
          :state="getValidationState($v.userInfo.password)"
          type="password"
          data-test-id="login-input-password"
          class="form-control-with-button password-input"
          @input="$v.userInfo.password.$touch()"
        >
        </b-form-input>
        <b-form-invalid-feedback id="password-required" role="alert">
          <template v-if="!$v.userInfo.password.required">
            {{ $t('global.form.fieldRequired') }}
          </template>
        </b-form-invalid-feedback>
      </input-password-toggle>
    </b-form-group>

    <b-button
      class="login-button"
      type="submit"
      variant="primary"
      data-test-id="login-button-submit"
      :disabled="disableSubmitButton"
      >{{ $t('pageLogin.logIn') }}</b-button
    >
  </b-form>
</template>

<script>
import { required } from 'vuelidate/lib/validators';
import VuelidateMixin from '@/components/_sila/Mixins/VuelidateMixin.js';
import i18n from '@/i18n';
import Alert from '@/components/_sila/Global/Alert';
import InputPasswordToggle from '@/components/_sila/Global/InputPasswordToggle';

export default {
  name: 'Login',
  components: { Alert, InputPasswordToggle },
  mixins: [VuelidateMixin],
  data() {
    return {
      userInfo: {
        username: null,
        password: null,
      },
      disableSubmitButton: false,
      languages: [
        {
          value: 'ru-RU',
          text: 'Русский',
        },
        {
          value: 'en-US',
          text: 'English',
        },
        {
          value: 'es',
          text: 'Español',
        },
      ],
    };
  },
  computed: {
    authError() {
      return this.$store.getters['authentication/authError'];
    },
  },
  validations: {
    userInfo: {
      username: {
        required,
      },
      password: {
        required,
      },
    },
  },
  methods: {
    login: function () {
      this.$v.$touch();
      if (this.$v.$invalid) return;
      this.disableSubmitButton = true;
      const username = this.userInfo.username;
      const password = this.userInfo.password;
      this.$store
        .dispatch('authentication/login', { username, password })
        .then(() => {
          localStorage.setItem('storedLanguage', i18n.locale);
          localStorage.setItem('storedUsername', username);
          this.$store.commit('global/setUsername', username);
          this.$store.commit('global/setLanguagePreference', i18n.locale);
          return this.$store.dispatch(
            'authentication/checkPasswordChangeRequired',
            username
          );
        })
        .then((passwordChangeRequired) => {
          if (passwordChangeRequired) {
            this.$router.push('/change-password');
          } else {
            this.$router.push('/');
          }
        })
        .catch((error) => console.log(error))
        .finally(() => (this.disableSubmitButton = false));
    },
  },
};
</script>
<style scoped>
.regular-12px {
  margin-left: 10px;
}
.username-input,
.password-input {
  height: 56px;
  margin: -30px 0 0 0;
  padding-top: 30px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0em;
}

.text-input {
  margin: 0 0 0 50px;
  padding: 0 0 0 5px;
}

.login-button {
  height: 36px;
  width: 380px;
}

@media (max-width: 576px) {
  .login-button {
    width: 100%;
  }
}
</style>
