<template>
  <v-container fluid>
    <v-progress-linear v-if="loginInProgress" v-bind:indeterminate="true"/>
    <v-layout xs12 column align-space-between>
      <v-flex>
        <v-form v-on:submit.prevent="login">
          <v-layout column>
            <v-flex>
              <v-text-field v-model="username" :label="label('User.username')" required/>
            </v-flex>
            <v-flex>
              <v-text-field
                :label="label('User.password')"
                v-model="password"
                autocomplete="off"
                :append-icon="showPassword ? 'visibility_off' : 'visibility'"
                :append-icon-cb="() => (showPassword = !showPassword)"
                :type="showPassword ? 'text': 'password'"
                required/>
            </v-flex>
            <v-flex>
              <v-text-field
                v-if="resettingPassword"
                :label="label('NewPassword')"
                v-model="newpassword"
                :append-icon="showPassword ? 'visibility_off' : 'visibility'"
                :append-icon-cb="() => (showPassword = !showPassword)"
                :type="showPassword ? 'text': 'password'"
                required/>
            </v-flex>
            <v-flex>
              <v-text-field
                v-if="resettingPassword"
                :label="label('NewPasswordVerify')"
                v-model="newpasswordverify"
                :append-icon="showPassword ? 'visibility_off' : 'visibility'"
                :append-icon-cb="() => (showPassword = !showPassword)"
                :type="showPassword ? 'text': 'password'"
                required/>
            </v-flex>
            <v-flex>
              <v-select :items="sites"
                        v-model="selectedSite"
                        item-text="siteid"
                        :label="label('Site.siteid')"
                        :filter="siteAutocompleteFilter"
                        autocomplete
                        required
                        return-object
                        :hint="`${selectedSite ? selectedSite.name : ''}`"
                        persistent-hint>
                <template slot="item" slot-scope="data">
                  <div>({{ data.item.siteid }}) &nbsp; {{data.item.name}}</div>
                </template>
              </v-select>
            </v-flex>
          </v-layout>
          <v-layout row justify-space-between>
            <v-flex>
              <v-checkbox
                v-if="!resettingPassword"
                :label="label('User.resetpassword')"
                v-model="changePassword"/>
            </v-flex>
            <v-flex class="text-xs-right">
              <v-btn
                @click="login"
                :disabled="sites.length <= 0 || loginInProgress || !selectedSite">
                  {{label('login')}}
              </v-btn>
            </v-flex>
          </v-layout>
        </v-form>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { mapGetters } from "vuex";
import { PasswordResetException } from "../exceptions";

export default {
  data() {
    return {
      resettingPassword: false,
      changePassword: false,
      showPassword: false,
      username: "",
      password: "",
      newpassword: null,
      newpasswordverify: null,
      selectedSite: null,
      sites: [],
      siteAutocompleteFilter(item, queryString, itemText) {
        const hasValue = val => (val != null ? val : "");
        const siteid = hasValue(item.siteid)
          .toString()
          .toLowerCase();
        const siteName = hasValue(item.name)
          .toString()
          .toLowerCase();
        const query = hasValue(queryString)
          .toString()
          .toLowerCase();
        return siteid.indexOf(query) > -1 || siteName.indexOf(query) > -1;
      }
    };
  },
  computed: {
    loginInProgress() {
      return this.$store.state.login_inprogress;
    },
    loginData() {
      let loginData = {
        username: this.username,
        password: this.password,
        siteid: this.selectedSite.siteid
      };
      if (this.resettingPassword) {
        loginData.password = this.password;
        loginData.newpassword = this.newpassword;
        loginData.newpasswordverify = this.newpasswordverify;
      }
      return loginData;
    },
    ...mapGetters(["label", "error"])
  },
  methods: {
    async login() {
      try {
        let loginData = this.loginData;
        if (this.changePassword) {
          loginData.resetpassword = "Y";
          this.changePassword = false;
        }
        await this.$store.dispatch("authenticate", loginData);
        this.$router.push({ name: "count" });
      } catch (e) {
        if (e instanceof PasswordResetException) {
          this.password = null;
          this.resettingPassword = true;
        } else {
          this.$notify(e.notifyParams);
        }
      }
    }
  },
  async created() {
    this.sites = await this.$store.dispatch('get_sites');
    throw new ReferenceError("testing");
  }
};
</script>