<template>
    <v-app id="login">
      <v-container fluid fill-height>
        <v-layout>
          <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">
            <v-toolbar class="fixcolors mt-5" dark>
              <v-spacer></v-spacer>
              <v-toolbar-title>Reset Password</v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-card class="elevation-1 pa-3" id="form">
              <v-card-text>
                <v-flex xs12 sm8 md8 lg8 offset-sm2>

                  <v-form class="mt-3" ref="form" v-model="valid" lazy-validation>
                    <v-select
                      :rules="userRule"
                      label="Select User"
                      :items="getRoles"
                      item-text="name"
                      item-value="name"
                      v-model="resetPassword.name"
                      @change="getUsers(resetPassword.name)"
                    ></v-select>
                    <v-select
                      :rules="userNameRule"
                      label="Select User Name"
                      :items="getUsersName"
                      item-text="email"
                      item-value="email"
                      v-model="resetPassword.email"
                    ></v-select>

                    <v-text-field

                      :rules="newPasswordRule"
                      v-model="resetPassword.newPassword"
                      :error-messages="errors.collect('resetPassword.newPassword')"
                      v-validate="'required'"
                      data-vv-name="resetPassword.newPassword"

                      label="New Password"
                    ></v-text-field>
                    <v-text-field

                      v-model="resetPassword.confirmPassword"
                      :rules="rePasswordRule"
                      :error-messages="errors.collect('password2')"
                      v-validate="{ required: true, is: resetPassword.newPassword }"
                      data-vv-name="password2"
                      data-vv-as="password"

                      label="Re-Password"
                    ></v-text-field>
                  </v-form>
                </v-flex>
              </v-card-text>
              <v-card-actions>
                <v-flex text-xs-center>
                  <v-btn
                    class="mt-3"
                    round
                    color="black"
                    dark
                    large
                    :loading="loading"
                    @click="reset"
                  >Reset Password</v-btn>
                </v-flex>
              </v-card-actions>
              <v-snackbar
                :timeout="timeout"
                :top="y === 'top'"
                :right="x === 'right'"
                :vertical="mode === 'vertical'"
                v-model="snackbar"
                :color="color"
              >{{ text }}</v-snackbar>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-app>
  </template>
  <script>
  import http from "@/Services/http.js";
  
  export default {
    data() {
      return {
        snackbar: false,
        y: "top",
        x: "right",
        mode: "",
        timeout: 4000,
        text: "",

        color: "",
        password2: "",
        resetPassword: {},
        getUsersName: [],
        getRoles: [],
        valid: true,

        loading: false,

        text: "Password Changed",

        newPassword: "",

        userRule: [v => !!v || "User is required"],
        userNameRule: [v => !!v || "User Name is required"],
        newPasswordRule: [v => !!v || "New Password is required"],
        rePasswordRule: [v => !!v || "Re-Password is required"]

      };
    },

    mounted() {
      this.token = this.$store.state.token;
      this.getRole();
    },

    methods: {
      reset() {

        if (this.$refs.form.validate()) {
          this.loading = true;
          this.resetPassword.roleName = this.resetPassword.name;
          http()
            .put("/resetPasswordOfUsers", this.resetPassword, {
              headers: { Authorization: "Bearer " + this.token }
            })
            .then(response => {
              this.loading = false;
              this.snackbar = true;
              this.text = "Successfully Restet password !!";
              this.color = "green";
              this.clear();
            })
            .catch(error => {
              // console.log("err====>",err);
              this.snackbar = true;
              this.text = "User Not Found or Incorrect currentPassword";
              this.color = "error";
              this.loading = false;
            });
        }
      },
      getRole() {
        this.showLoader = true;

        http()

          .get("/getRolesList", {
            headers: { Authorization: "Bearer " + this.token }

          })
          .then(response => {

            for (let i = 0; i < response.data.data.length; i++) {
              if (
                response.data.data[i].name != "SUPERADMIN" &&
                response.data.data[i].name != "ADMIN"
              ) {
                this.getRoles.push(response.data.data[i]);
                this.showLoader = false;
              }

            }

          })

          .catch(error => {
            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }
          });
      },
      clear() {
        this.$refs.form.reset();
      },
      getUsers(roles) {
        this.showLoader = true;
        http()
          .get("/getUserWithRole", {
            params: {
              name: roles
            },
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.getUsersName = response.data.data;
          })
          .catch(error => {
            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }

          });

      }
    }
  };
  </script>
  <style scoped>
  img {
    position: absolute;
    top: 13px;
    left: 50px;
  }
  .v-btn--large {
    padding: 0px 74px;
  }
  @media screen and (max-width: 769px) {
    .v-btn--large {
      font-size: 14px;
      height: 44px;
      padding: 0 32px;
    }
  }
  </style>