<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const { showLoader, hideLoader, messageError, success } = useCounterMixin();

const modal = defineModel<boolean>("modelValue", {
  default: false,
});

const newPassword = ref<string>("");
const oldPassword = ref<string>("");
const reNewPassword = ref<string>("");
const isPwdNewOld = ref<boolean>(true);
const isPwdReNewOld = ref<boolean>(true);

function closeDialog() {
  modal.value = false;
  newPassword.value = "";
  oldPassword.value = "";
  reNewPassword.value = "";
  isPwdNewOld.value = true;
  isPwdReNewOld.value = true;
}

async function onSubmit() {
  try {
    showLoader();
    await http.post(config.API.changePassword, {
      password: newPassword.value,
    });
    success($q, `เปลี่ยนรหัสใหม่สำเร็จ`);
    closeDialog();
  } catch (error) {
    messageError($q, error);
  } finally {
    hideLoader();
  }
}

function ruleNewPassWord(val: string) {
  return new Promise((resolve) => {
    if (!val) {
      return resolve("กรุณากรอกรหัสผ่านใหม่");
    }
    if (val === oldPassword.value) {
      return resolve("รหัสผ่านใหม่ต้องไม่ซ้ำกับรหัสผ่านเดิม");
    }
    if (val.length < 8) {
      return resolve("รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร");
    }
    if (!/^[A-Za-z0-9!@#$%&*]+$/.test(val)) {
      return resolve(
        "รหัสผ่านต้องมีเฉพาะภาษาอังกฤษ ตัวเลข และอักขระพิเศษ (! @ # $ % & *) เท่านั้น"
      );
    }

    resolve(true);
  });
}

function ruleReNewPassWord(val: string) {
  return new Promise((resolve) => {
    if (!val) {
      return resolve("กรุณายืนยันรหัสผ่านใหม่");
    }
    if (val.length < 8) {
      return resolve("รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร");
    }
    if (!/^[A-Za-z0-9!@#$%&*]+$/.test(val)) {
      return resolve(
        "รหัสผ่านต้องมีเฉพาะภาษาอังกฤษ ตัวเลข และอักขระพิเศษ (! @ # $ % & *) เท่านั้น"
      );
    }
    if (val !== newPassword.value) {
      return resolve("รหัสผ่านใหม่ไม่ตรงกัน");
    }
    resolve(true);
  });
}
</script>
<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 300px">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader tittle="เปลี่ยนรหัสผ่าน" :close="closeDialog" />
        <q-separator />

        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <q-input
                v-model="newPassword"
                outlined
                dense
                :type="isPwdNewOld ? 'password' : 'text'"
                :rules="[ruleNewPassWord]"
                label="รหัสผ่านใหม่"
                hide-bottom-space
              >
                <template v-slot:append>
                  <q-icon
                    :name="isPwdNewOld ? 'visibility_off' : 'visibility'"
                    class="cursor-pointer"
                    @click="isPwdNewOld = !isPwdNewOld"
                  />
                </template>
              </q-input>
            </div>
            <div class="col-12">
              <q-input
                v-model="reNewPassword"
                outlined
                dense
                :type="isPwdReNewOld ? 'password' : 'text'"
                :rules="[ruleReNewPassWord]"
                label="ยืนยัน รหัสผ่านใหม่"
                hide-bottom-space
                bottom-slots
              >
                <template v-slot:append>
                  <q-icon
                    :name="isPwdReNewOld ? 'visibility_off' : 'visibility'"
                    class="cursor-pointer"
                    @click="isPwdReNewOld = !isPwdReNewOld"
                  />
                </template>
              </q-input>
            </div>
          </div>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
