<script setup>
import { ref, watch, computed } from "vue";
import { isEqual, isUndefined, isEmpty } from "lodash-es";
const props = defineProps({
  title: { type: String, required: false, default: "Confirm" },
  modelValue: { type: Boolean, required: true },
  message: { type: String, required: false, default: "Do you want to proceed?" },
  buttonTrueText: { type: String, required: false, default: "Ok" },
  buttonFalseText: { type: String, required: false, default: "Cancel" },
  type: { type: String, required: false, default: "primary" },
  confirmData: { type: String, required: false },
  width: { type: String, required: false, default: "auto" }
});
const emit = defineEmits(["update:modelValue", "resolve", "reject"]);
const dialogVisible = ref(props.modelValue);
watch(() => props.modelValue, (val) => {
  dialogVisible.value = val;
});
watch(dialogVisible, (val) => {
  if (!val) emit("update:modelValue", false);
});
const txtConfirm = ref("");
const isDisabled = computed(() => {
  if (isUndefined(props.confirmData)) return false;
  if (isEmpty(props.confirmData)) return true;
  return !isEqual(txtConfirm.value, props.confirmData);
});
const handleResult = (result) => {
  dialogVisible.value = false;
  emit("resolve", result);
};
</script>

<template>
  <v-row justify="center">
    <v-dialog
        v-model="dialogVisible"
        persistent
        :width="props.width"
    >
      <v-card>
        <v-toolbar
            :color="props.type"
            :title="props.title"
        />
        <v-card-text>{{ props.message }}</v-card-text>
        <v-card-text v-if="props.confirmData">
          <v-text-field
              v-model="txtConfirm"
              variant="underlined"
          >
            <template #label>
              <slot
                  name="labelTextConfirm"
                  :text="props.confirmData"
              />
            </template>
          </v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn
              variant="text"
              @click="handleResult(false)"
          >
            {{ props.buttonFalseText }}
          </v-btn>
          <v-btn
              :color="props.type"
              variant="text"
              :disabled="isDisabled"
              @click="handleResult(true)"
          >
            {{ props.buttonTrueText }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>
