<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="card-styles mt-5" dark>
            <v-spacer></v-spacer>
            <v-toolbar-title>Change 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
                    :append-icon="e1 ? 'visibility_off' : 'visibility'"
                    :append-icon-cb="() => (e1 = !e1)"
                    :type="e1 ? 'password' : 'text'"
                    :rules="oldPasswordRule"
                    v-model="resetPassword.oldPassword"
                    :error-messages="errors.collect('resetPassword.oldPassword')"
                    v-validate="'required'"
                    data-vv-name="resetPassword.oldPassword"
                    label="Old Password"
                  ></v-text-field>
                  <v-text-field
                    :append-icon="e1 ? 'visibility_off' : 'visibility'"
                    :append-icon-cb="() => (e1 = !e1)"
                    :type="e1 ? 'password' : 'text'"
                    :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
                    :append-icon="e1 ? 'visibility_off' : 'visibility'"
                    :append-icon-cb="() => (e1 = !e1)"
                    :type="e1 ? 'password' : 'text'"
                    v-model="resetPassword.confirmPassword"
                    :rules="rePasswordRule"
                    :error-messages="errors.collect('password2')"
                    v-validate="{ required: false, is: resetPassword.newPassword }"
                    data-vv-name="password2"
                    data-vv-as="password"
                    label="Re-enter New Password"
                  ></v-text-field>
                </v-form>
              </v-flex>
            </v-card-text>
            <v-card-actions>
              <v-flex text-xs-center>
                <v-btn
                  style="background-color: #71d9ea; color: #0c0754;"
                  dark
                  flat
                  large
                  :loading="loading"
                  @click="reset"
                >Change 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: "",
      e1: true,
      password2: "",
      resetPassword: {},
      getUsersName: [],
      getRoles: [],
      valid: true,
      loading: false,
      text: "Password Changed",
      newPassword: "",
      oldPassword: "",
      userRule: [(v) => !!v || "User is required"],
      userNameRule: [(v) => !!v || "User Name is required"],
      oldPasswordRule: [(v) => !!v || "Old Password is required"],
      newPasswordRule: [(v) => !!v || "New Password is required"],
      rePasswordRule: [(v) => !!v || "Re-Password is required"],
    };
  },
  mounted() {
    this.token = this.$store.state.token;
    if (this.$store.state.role != "PARENT") {
      this.getRole();
    }
  },
  methods: {
    reset() {
      if (
        this.$refs.form.validate() &&
        this.resetPassword.oldPassword === this.resetPassword.oldPassword
      ) {
        this.loading = true;
        this.resetPassword.newPassword = this.resetPassword.newPassword;
        http()
          .put("/change-password", 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>
.card-styles {
  background: #7f62f8 !important;
  border-color: #7f62f8 !important;
}
</style>