<template>
  <v-dialog :model-value="modelValue" width="450" persistent>
    <v-card width="100%">
      <v-toolbar density="compact" class="pl-4">
        <span class="font-weight-medium text-h5">Delete Card</span>
      </v-toolbar>

      <v-card-text>
        <p class="text-subtitle-2 text-center mb-4">
          Are you sure you want to delete this card? This action cannot be
          undone.
        </p>

        <v-form v-model="validForm" :disabled="loading">
          <InputLabel class="text-capitalize font-weight-bold" title="Remarks" required />
          <v-textarea
            v-model="remarks"
            placeholder="Enter remarks..."
            persistent-placeholder
            rows="3"
            auto-grow
            hide-details="auto"
            :rules="[requiredRule]"
          />
        </v-form>

        <v-row v-if="error" no-gutters justify="center" class="mt-3">
          <span class="text-caption text-error text-center">{{ error }}</span>
        </v-row>
      </v-card-text>

      <v-toolbar density="compact">
        <v-row no-gutters>
          <v-col cols="6">
            <v-btn
              tile
              block
              size="48"
              variant="text"
              class="text-none"
              :disabled="loading"
              @click="handleClose"
            >
              Close
            </v-btn>
          </v-col>
          <v-col cols="6">
            <v-btn
              tile
              block
              size="48"
              color="black"
              variant="flat"
              class="text-none"
              :loading="loading"
              :disabled="!validForm || loading"
              @click="handleConfirm"
            >
              Delete Card
            </v-btn>
          </v-col>
        </v-row>
      </v-toolbar>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  error: {
    type: String,
    default: "",
  },
});

const emit = defineEmits<{
  "update:modelValue": [value: boolean];
  confirm: [remarks: string];
}>();

const { requiredRule } = useUtils();

const validForm = ref(false);
const remarks = ref("");

watch(
  () => props.modelValue,
  (val) => {
    if (val) remarks.value = "";
  }
);

function handleClose() {
  emit("update:modelValue", false);
}

function handleConfirm() {
  if (!validForm.value) return;
  emit("confirm", remarks.value.trim());
}
</script>
