<template>
  <div :class="{ '-open': isOpen }" class="v-modal">
    <transition name="fade">
      <div
          class="fixed min-w-[400px] left-1/2 top-1/2 z-50 flex max-h-screen -translate-x-1/2 -translate-y-1/2 transform flex-col rounded-xl border-tertiary-500 bg-white"
          v-if="isOpen"
      >
        <slot>
          <div class="relative min-h-[260px] overflow-y-auto flex" :class="{ 'overflow-y-visible': !scrollable }">
            <div class="p-6 flex justify-between flex-col">
              <div>
                <div class="flex justify-between">
                <span class="p-2 rounded-full border-8 border-error-50 bg-error-100 text-error-600">
                  <TrashICon class="w-6 h-6"></TrashICon>
                </span>
                  <CloseIcon class="w-6 h-6 text-gray-400 hover:bg-gray-100 rounded-md cursor-pointer" @click="close"></CloseIcon>
                </div>
                <h4 class="text-lg font-semibold text-gray-900 pb-2 pt-4">Delete this {{ entity }}?</h4>
                <p class="text-sm text-gray-600 pb-4">Do you want to delete this {{ entity }}? This action cannot be undone.</p>
              </div>

              <div class="flex justify-between space-x-xsSpace pt-xsSpace gap-4">
                <a @click="close"
                   class="w-1/2 py-[9px] rounded-full border border-gray-300 shadow-xs text-md font-semibold hover:bg-gray-100 text-gray-700 text-center cursor-pointer"
                   v-text="cancelButton"></a>
                <a @click.prevent="confirm"
                   class="w-1/2 py-[9px] rounded-full shadow-xs text-md font-semibold text-white bg-error-600 hover:bg-error-700 border border-error-600 text-center cursor-pointer"
                   v-text="confirmButton"></a>
              </div>
            </div>
          </div>
        </slot>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import TrashICon from "@/assets/img/icons/trash-01.svg";
import CloseIcon from "@/assets/img/icons/x-close.svg";
import {ref, reactive, computed} from "vue";

const props = defineProps({
  entity: {
    type: String,
    required: true,
  },
  callback: {
    type: Function,
    required: false,
    default: () => {}
  },
});

const isOpen = ref(false);
const state = reactive({
  cancelTitle: null as string | null,
  confirmTitle: null as string | null,
  scrollable: true,
  data: null,
});

const cancelButton = computed(() =>
    state.cancelTitle ? state.cancelTitle : "Cancel"
);

const confirmButton = computed(() =>
    state.confirmTitle ? state.confirmTitle : "Delete"
);

const open = (data) => {
  isOpen.value = true;
  state.data = data;
};

const close = () => {
  isOpen.value = false;
};

const confirm = async () => {
  props.callback(state.data);
  isOpen.value = false;
};

defineExpose({
  open,
  close,
});

</script>

<style scoped>
.v-modal {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
  transition: background-color 0.3s linear;

  &.-open {
    pointer-events: all;
    background-color: rgba(50, 50, 50, 0.3);
  }
}
</style>