<script setup>
import { ref, watch, computed } from "vue";
import { isEqual, isUndefined, isEmpty } from "lodash-es";
const props = defineProps({
  title: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19" },
  modelValue: { type: Boolean, required: true },
  message: { type: String, required: false, default: "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E17\u0E33\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E19\u0E35\u0E49" },
  buttonTrueText: { type: String, required: false, default: "\u0E15\u0E01\u0E25\u0E07" },
  buttonFalseText: { type: String, required: false, default: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01" },
  type: { type: String, required: false },
  confirmData: { type: String, required: false },
  width: { type: String, required: false, default: "auto" }
});
const emit = defineEmits(["update:result", "update:modelValue"]);
const dialogVisible = ref(false);
dialogVisible.value = props.modelValue;
watch(
  () => props.modelValue,
  () => {
    dialogVisible.value = props.modelValue;
  }
);
const txtConfirm = ref();
const isDisabled = computed(() => {
  if (isUndefined(props.confirmData)) return false;
  if (isEmpty(props.confirmData)) return true;
  return props.confirmData ? !isEqual(txtConfirm.value, props.confirmData) : false;
});
const handleResult = (result) => {
  dialogVisible.value = false;
  emit("update:modelValue", dialogVisible.value);
  emit("update:result", result);
  txtConfirm.value = "";
};
</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>
