<script setup lang="ts">

import Message from "primevue/message";
import Password from "primevue/password";
import {Form, type FormResolverOptions, type FormSubmitEvent} from "@primevue/forms";
import Button from "primevue/button";
import Divider from "primevue/divider";

const formResolver = (ev: FormResolverOptions): Record<string, any> => {
  const resp = {
    errors: {
      CurrentPassword: [],
      Password: [],
      RepeatPassword: []
    }
  };

  const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#$%^&*!])[A-Za-z\d@#$%^&*!]{8,}$/;
  if ("CurrentPassword" in ev.values && ev.values["CurrentPassword"] === undefined || !ev.values["CurrentPassword"].match(regex)) {
    resp.errors["Password"] = ["Current password doesn't meet requirements."];
  }

  if ("Password" in ev.values && ev.values["Password"] === undefined || !ev.values["Password"].match(regex)) {
    resp.errors["Password"] = ["New password doesn't meet requirements."];
  }

  if ("RepeatPassword" in ev.values && ev.values["RepeatPassword"] === undefined || ev.values["RepeatPassword"] != ev.values["Password"]) {
    resp.errors["RepeatPassword"] = ["Invalid repeat password."];
  }

  return resp;
};

const onFormSubmit = (event: FormSubmitEvent) => {
  if (!event.valid) {
    
  } else {
    
  }
};
</script>

<template>
<div>
  <Form v-slot="$form" :resolver="formResolver" :validateOnValueUpdate="true" :validateOnBlur="true" @submit="onFormSubmit" class="flex flex-col space-y-2">
    <div class="flex flex-col gap-1">
      <Password name="CurrentPassword" type="text" placeholder="Current Password" toggleMask required />
      <Message v-if="$form.CurrentPassword?.invalid" severity="error" size="small" variant="simple">{{ $form.CurrentPassword.error }}</Message>
    </div>
    <div class="flex flex-col gap-1">
      <Password name="Password" type="text" placeholder="Password" toggleMask required>
        <template #header>
          <h6>Pick a password</h6>
        </template>
        <template #footer>
          <Divider />
          <p class="mt-2">Requirements</p>
          <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
            <li>At least one lowercase</li>
            <li>At least one uppercase</li>
            <li>At least one numeric</li>
            <li>At least one of @#$%^&*!</li>
            <li>Minimum 8 characters</li>
          </ul>
        </template>
      </Password>
      <Message v-if="$form.Password?.invalid" severity="error" size="small" variant="simple">{{ $form.Password.error }}</Message>
    </div>
    <div class="flex flex-col gap-1">
      <Password name="RepeatPassword" type="text" placeholder="Repeat Password" toggleMask required />
      <Message v-if="$form.RepeatPassword?.invalid" severity="error" size="small" variant="simple">{{ $form.RepeatPassword.error }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Change password" />
  </Form>
</div>
</template>

<style scoped>

</style>