<script setup>
import { computed, ref, watch } from "vue";
import { useDialog } from "../../../composables/dialog";
import { useGraphQlOperation } from "../../../composables/graphqlOperation";
import { useState } from "#imports";
const props = defineProps({
  title: { type: String, required: false, default: "Verify User" },
  modelValue: { type: Boolean, required: true },
  message: { type: String, required: false, default: "Please enter your credentials to continue." },
  confirmButtonText: { type: String, required: false, default: "Verify" },
  cancelButtonText: { type: String, required: false, default: "Cancel" },
  type: { type: String, required: false, default: "primary" },
  fixedUsername: { type: [Boolean, String], required: false, default: true },
  width: { type: String, required: false, default: "400" }
});
const emit = defineEmits(["update:modelValue", "resolve", "reject"]);
const authenState = useState("authentication");
const dialogVisible = ref(props.modelValue);
watch(() => props.modelValue, (val) => {
  dialogVisible.value = val;
});
watch(dialogVisible, (val) => {
  if (!val) emit("update:modelValue", false);
});
const username = ref("");
const password = ref("");
watch(() => props.fixedUsername, (fixedUsername) => {
  if (fixedUsername === true) {
    let userProfile = authenState.value?.userProfile;
    username.value = userProfile?.username ?? "";
  } else {
    username.value = fixedUsername ? fixedUsername : "";
  }
}, { immediate: true });
const isDisabled = computed(() => {
  return !username.value || !password.value;
});
const verifyUser = async (username2, password2) => {
  try {
    let result = await useGraphQlOperation("Mutation", "verifyUser", ["success"], { username: username2, password: password2 });
    return result.success;
  } catch (_error) {
    return false;
  }
};
const handleConfirm = async () => {
  const verified = await verifyUser(username.value, password.value);
  if (verified) {
    dialogVisible.value = false;
    emit("resolve", username.value);
  } else {
    useDialog().notify({ message: "Invalid username or password", type: "warning", title: "Error" });
  }
};
const handleCancel = () => {
  dialogVisible.value = false;
  emit("reject", "User cancelled");
};
</script>

<template>
  <v-row justify="center">
    <v-dialog
        v-model="dialogVisible"
        :width="props.width"
        persistent
    >
      <v-card>
        <v-toolbar
            :color="props.type"
            :title="props.title"
            density="compact"
        />
        <v-card-text>
          <div class="mb-2">{{ props.message }}</div>
          <v-text-field
              v-model="username"
              :readonly="!!props.fixedUsername"
              label="Username"
              variant="underlined"
          />
          <v-text-field
              v-model="password"
              label="Password"
              type="password"
              variant="underlined"
          />
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn variant="text" @click="handleCancel">
            {{ props.cancelButtonText }}
          </v-btn>
          <v-btn
              :color="props.type"
              :disabled="isDisabled"
              variant="text"
              @click="handleConfirm"
          >
            {{ props.confirmButtonText }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>
