<template>
  <div class="  ">
    <div class="modal-content-style">
      <div v-if="canView">
        <div class="popUp-tab__content tab-content">
          <div
            class="fade show active"
            id="nav-changepass"
            role="tabpanel"
            aria-labelledby="nav-changepass-tab"
          >
            <div class="my-profile__container" style="position: relative">
              <div class="my-profile">
                <div class="my-profile__form">
                  <div class="mt-md-5">
                    <div class="form-row">
                      <label class="col-12 col-md-5" for=""
                        >{{ $t("CurrentPassword") }}:</label
                      >
                      <div class="col-12 col-md-7">
                        <input
                          class="form-control"
                          type="password"
                          placeholder="رمز عبور فعلی"
                          v-model.trim="$v.password.$model"
                        />
                        <!-- <button
                          type="button"
                          @click="togglePasswordVisibility"
                          class="toggle-password-btn border-right-0 rounded-left"
                        >
                          <svg v-if="isPasswordVisible" class="icon icon-eye">
                            <use xlink:href="#icon-eye"></use>
                          </svg>
                          <svg v-else class="icon icon-Eye-Slash">
                            <use xlink:href="#icon-Eye-Slash"></use>
                          </svg>
                        </button> -->
                      </div>
                    </div>
                    <div class="form-row my-3 position-relative">
                      <label class="col-12 col-md-5" for=""
                        >{{ $t("NewPassword") }}:</label
                      >
                      <div class="col-12 col-md-7">
                        <input
                          class="form-control"
                          :class="{ 'form-group--error': $v.newpass.$error }"
                          :type="passwordFieldType"
                          placeholder="رمز عبور جدید"
                          v-model.trim="$v.newpass.$model"
                          @focus="isFocusedOnNewpass = true"
                          @blur="isFocusedOnNewpass = false"
                        />
                        <button
                          type="button"
                          @click="togglePasswordVisibility"
                          class="toggle-password-btn border-right-0 rounded-left"
                        >
                          <svg v-if="isPasswordVisible" class="icon icon-eye">
                            <use xlink:href="#icon-eye"></use>
                          </svg>
                          <svg v-else class="icon icon-Eye-Slash">
                            <use xlink:href="#icon-Eye-Slash"></use>
                          </svg>
                        </button>
                      </div>
                    </div>
                    <transition name="fade">
                      <div
                        v-if="isFocusedOnNewpass"
                        class="password-requirements"
                      >
                        <ul>
                          <li
                            :class="{
                              'text-success':
                                !$v.newpass.$pending && $v.newpass.minLength,
                              'text-danger': !$v.newpass.minLength,
                            }"
                          >
                            طول آن حداقل باید 8 کاراکتر باشد
                          </li>
                          <li
                            :class="{
                              'text-success':
                                !$v.newpass.$pending && $v.newpass.hasLowerCase,
                              'text-danger': !$v.newpass.hasLowerCase,
                            }"
                          >
                            حداقل شامل یک حرف کوچک باشد
                          </li>
                          <li
                            :class="{
                              'text-success':
                                !$v.newpass.$pending && $v.newpass.hasUpperCase,
                              'text-danger': !$v.newpass.hasUpperCase,
                            }"
                          >
                            حداقل شامل یک حرف بزرگ باشد
                          </li>
                          <li
                            :class="{
                              'text-success':
                                !$v.newpass.$pending &&
                                $v.newpass.hasSpecialChar,
                              'text-danger': !$v.newpass.hasSpecialChar,
                            }"
                          >
                            حداقل شامل یک کاراکتر خاص باشد
                          </li>
                        </ul>
                      </div>
                    </transition>
                    <div class="form-row my-3 position-relative">
                      <label class="col-12 col-md-5" for=""
                        >{{ $t("RepeatNewPassword") }}:</label
                      >
                      <div class="col-12 col-md-7">
                        <input
                          class="form-control"
                          :class="{ 'form-group--error': $v.repassword.$error }"
                          type="password"
                          placeholder="تکرار رمز عبور"
                          v-model.trim="$v.repassword.$model"
                          @focus="isFocusedOnRepassword = true"
                          @blur="isFocusedOnRepassword = false"
                        />
                        <div v-if="$v.repassword.$error">
                          <div class="error">
                            {{ $t("PasswordsDoNotMatch") }}
                          </div>
                        </div>
                        <!-- <button
                          type="button"
                          @click="togglePasswordVisibility"
                          class="toggle-password-btn border-right-0 rounded-left"
                        >
                          <svg v-if="isPasswordVisible" class="icon icon-eye">
                            <use xlink:href="#icon-eye"></use>
                          </svg>
                          <svg v-else class="icon icon-Eye-Slash">
                            <use xlink:href="#icon-Eye-Slash"></use>
                          </svg>
                        </button> -->
                      </div>
                    </div>
                  </div>
                  <div class="d-flex justify-content-end mt-3 ml-5">
                    <button @click="edit" class="button btn">
                      {{ $t("Save") }}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <no-data v-else>
        <!-- <the-content-loading v-if="fetchingData"></the-content-loading> -->

        <div class="d-flex justify-content-center align-items-center">
          <div
            class="alert alert-warning d-flex justify-content-center align-items-center"
          >
            <span
              class="tavasi tavasi-warning-circle color-inherit ml-1 text__32"
            ></span>
            {{ $t("Inaccessibility") }}
          </div>
        </div>
      </no-data>
    </div>
  </div>
</template>
<script>
import settingsMixin from "@mixins/settings/settingsMixin";
import {
  required,
  minLength,
  sameAs,
} from "@vuelidate/validators";

export default {
  validations: {
    password: {
      required,
      minLength: minLength(8),
    },
    newpass: {
      required,
      minLength: minLength(8),
      hasLowerCase: (value) => /[a-z]/.test(value),
      hasUpperCase: (value) => /[A-Z]/.test(value),
      hasSpecialChar: (value) => /[!@#$%^&*(),.?":{}|<>]/.test(value),
    },
    repassword: {
      required,
      sameAsPassword: sameAs("newpass"),
      minLength: minLength(8),
    },
    code: {
      required,
    },
  },
  props: ["currentTab"],
  mixins: [settingsMixin],
  mounted() {
    if (this.isRealUser) {
      this.canView = true;
    } else this.canView = false;
  },
  data() {
    return {
      password: "",
      newpass: "",
      repassword: "",
      submitStatus: null,
      isFocusedOnNewpass: false,
      isFocusedOnRepassword: false,
      isPasswordVisible: false,
    };
  },
  computed: {
    passwordFieldType() {
      return this.isPasswordVisible ? "text" : "password";
    },
  },
  methods: {
    togglePasswordVisibility() {
      this.isPasswordVisible = !this.isPasswordVisible;
    },
  },
};
</script>
<style lang="scss" scoped>
.user-modal {
  border: none !important;
  /* height:35em !important; */
  margin-top: 0 !important;
  .my-profile {
    padding-bottom: unset !important;
  }
  .popUp-tab__content {
    padding-top: unset !important;
  }
}

.fix-user-modal {
  position: relative;
  margin: auto;
  top: 255px;
}
.fix {
  position: relative;
  margin: auto;
}
.my-profile__form {
  max-width: 40em;
}
.my-profile {
  padding-right: 50px;
}
.toggle-password-btn {
  position: absolute;
  left: 6px;
  min-width: 26px !important;
  height: 30px !important;
  border: 0 !important;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
}
.modal-content-style {
  height: 19em;
}
.password-requirements {
  /* position: absolute;
  top: 100%;
  left: 0; */
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.password-requirements ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0;
}

.password-requirements li {
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}
.form-group--loading .form__input,
.form-group--loading .form-control {
  border-image-slice: 1;
  animation: loading-frame 1s infinite;
}
.form-group--error {
  border-color: #f79483;
  animation-name: shakeError;
  animation-fill-mode: forwards;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
}
.error {
  color: #f04124;
}
</style>
