<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  title: { type: String, required: false, default: "Login Ramathibodi" },
  btnSubmit: { type: String, required: false, default: "\u0E40\u0E02\u0E49\u0E32\u0E2A\u0E39\u0E48\u0E23\u0E30\u0E1A\u0E1A" },
  imgLogo: { type: String, required: false, default: "" },
  errorMessages: { type: String, required: false, default: "" },
  loading: { type: Boolean, required: false, default: false },
  hint: { type: String, required: false, default: "" }
});
const formValid = ref(false);
const loginData = ref({ username: "", password: "" });
const emit = defineEmits(["update:modelValue"]);
const errorText = ref("");
const clearErrorMessages = () => {
  errorText.value = "";
};
watch(() => props.errorMessages, (newVal) => {
  if (errorText.value !== newVal) {
    errorText.value = newVal;
  }
});
const onSubmit = () => {
  if (!formValid.value) return;
  emit("update:modelValue", { ...loginData.value });
};
</script>

<template>
  <v-row
    justify="center"
    align="center"
  >
    <v-col
      cols="12"
      xs="12"
      sm="8"
      md="6"
      lg="6"
      xl="4"
      align-self="center"
    >
      <v-sheet
        class="pa-3"
        rounded
      >
        <v-card class="mx-auto px-6 py-6">
          <v-img
            :src="props.imgLogo"
            cover
          />
          <v-card-title class="text-primary text-center">
            {{ props.title }}
          </v-card-title>
          <v-form
            v-model="formValid"
            @submit.prevent="onSubmit"
          >
            <form-pad
              ref="formPadTemplate"
              v-model="loginData"
            >
              <template #default="{ data, rules }">
                <v-text-field
                  ref="usernameField"
                  v-model="data.username"
                  color="primary"
                  label="ชื่อผู้ใช้งาน (Username)"
                  clearable
                  :rules="[rules.require('\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38')]"
                  autofocus
                  @update:model-value="clearErrorMessages()"
                />
                <v-text-field
                  ref="passwordField"
                  v-model="data.password"
                  color="primary"
                  label="รหัสผ่าน (Password)"
                  type="password"
                  clearable
                  :rules="[rules.require('\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38')]"
                  autofocus
                  @update:model-value="clearErrorMessages()"
                />
              </template>
            </form-pad>
            <div class="text-body-2 text-error">
              {{ errorText }}
            </div>
            <div class="my-3">
              <slot name="hint">
                {{ props.hint }}
              </slot>
            </div>
            <v-btn
              :disabled="!formValid"
              :loading="props.loading"
              block
              color="primary"
              size="large"
              type="submit"
              variant="elevated"
            >
              {{ props.btnSubmit }}
            </v-btn>
          </v-form>
        </v-card>
      </v-sheet>
    </v-col>
  </v-row>
</template>
