<script setup>
import { ref, watch, computed } from "vue";
import BaseModal from "./BaseModal.vue";
import BaseInputText from "./BaseInputText.vue";
import BaseButton from "./BaseButton.vue";

const inputId = computed(
  () => `confirm-delete-${Math.random().toString(36).slice(2, 9)}`,
);

const props = defineProps({
  visible: { type: Boolean, default: false },
  title: { type: String, default: "Bevestig verwijderen" },
  description: { type: String, default: "" },
  itemLabel: { type: String, default: "" },
  confirmWord: { type: String, default: "Verwijderen" },
  confirmLabel: { type: String, default: "Verwijderen" },
  cancelLabel: { type: String, default: "Annuleren" },
  width: { type: String, default: "28rem" },
  loading: { type: Boolean, default: false },
});

const emit = defineEmits(["update:visible", "confirm", "cancel"]);

const typed = ref("");

watch(
  () => props.visible,
  (open) => {
    if (!open) typed.value = "";
  },
);

const canConfirm = () =>
  props.confirmWord !== "" && typed.value.trim() === props.confirmWord;

function confirm() {
  if (!canConfirm() || props.loading) return;
  emit("confirm");
  emit("update:visible", false);
}

function cancel() {
  if (props.loading) return;
  emit("cancel");
  emit("update:visible", false);
}
</script>

<template>
  <BaseModal
    :visible="visible"
    :title="title"
    :width="width"
    @update:visible="emit('update:visible', $event)"
  >
    <div class="flex flex-col gap-4">
      <p class="text-surface-700 dark:text-surface-300">
        <template v-if="description">{{ description }}</template>
        <template v-else>
          <span v-if="itemLabel"
            >U staat op het punt <strong>{{ itemLabel }}</strong> te
            verwijderen. <br />
            Dit kan niet ongedaan worden gemaakt.</span
          >
          <span v-else>Deze actie kan niet ongedaan worden gemaakt.</span>
        </template>
      </p>
      <div class="flex flex-col gap-2">
        <label
          :for="inputId"
          class="text-surface-700 dark:text-surface-300 font-medium"
          >Typ <strong>{{ confirmWord }}</strong> om te bevestigen:</label
        >
        <BaseInputText
          :id="inputId"
          v-model="typed"
          type="text"
          :placeholder="confirmWord"
          class="w-full"
          autocomplete="off"
          :disabled="loading"
          @keydown.enter="canConfirm() && confirm()"
        />
        <p
          v-if="typed.trim() && !canConfirm()"
          class="text-sm text-red-600 dark:text-red-400"
        >
          Typ exact "{{ confirmWord }}" (hoofdlettergevoelig) om de knop te
          activeren.
        </p>
      </div>
    </div>
    <template #footer-right>
      <div class="flex justify-end gap-2">
        <BaseButton
          :label="cancelLabel"
          variant="secondary"
          outlined
          :disabled="loading"
          @click="cancel"
        />
        <BaseButton
          :label="confirmLabel"
          variant="danger"
          :disabled="!canConfirm()"
          :loading="loading"
          @click="confirm"
        />
      </div>
    </template>
  </BaseModal>
</template>
