<script setup lang="ts">
import Modal from '@/components/utilities/Modal.vue'
import { ref, watch } from 'vue'

const props = defineProps({
  confirmHeader: {
    type: String,
    default: 'Are you sure?'
  },
  confirmFunction: {
    type: Function
  },
  cancelFunction: {
    type: Function
  },
  cancelButtonText: {
    type: String,
    default: 'Cancel'
  },
  confirmButtonText: {
    type: String,
    default: 'Confirm'
  },
  modalOpened: {
    type: Boolean,
    default: false
  }
})

watch(
  () => props.modalOpened,
  (val) => {
    modalOpened.value = val
  }
)

const modalOpened = ref(props.modalOpened)
</script>

<template>
  <Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="350" :modal-height="230">
    <template #modalHeader>
      <slot name="modalHeader"></slot>
    </template>
    <template #modalBody>
      <div class="h-[calc(100%_-_32px)] p-4">
        <div class="h-full flex flex-col justify-between">
          <slot name="modalBody"></slot>
          <div class="grid grid-flow-col justify-stretch gap-4">
            <button class="btn-empty py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
              {{ props.cancelButtonText }}
            </button>

            <button class="btn-red py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()">
              {{ props.confirmButtonText }}
            </button>
          </div>
        </div>
      </div>
    </template>
  </Modal>
</template>
