<script lang="ts" setup>
import RowCard from './RowCard.vue';
import { ref } from "vue";

const props = defineProps<{
    buttonText?: string,
}>();

const emit = defineEmits<{
    (e: 'submit', event : {cancel:boolean}): boolean,
    (e: 'open'): void,
}>();

const visible = ref(false);
function closeDialog() {
    visible.value = false;
};
function openDialog() {
    emit("open");
    visible.value = true;
};
function submitDialog() {
    const e = {cancel: false};
    emit("submit", e);
    if(e.cancel)
        return;

    visible.value = false;
}
</script>

<template>
  <button @click="openDialog">
    <slot name="placeholder">
      <RowCard>
        <p class="w-24 text-center text-6xl">
          +
        </p>
        <span
          class="text-lg"
          dark
        >{{ buttonText }}</span>
      </RowCard>
    </slot>
  </button>
  <div
    v-if="visible"
    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
  >
    <div
      class="relative md:top-20 md:mx-auto p-5 md:w-96 shadow-lg md:h-auto h-full rounded-md bg-white dark:bg-black"
    >
      <div class="mt-3 text-center">
        <h3
          class="mt-3 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100"
        >
          {{ buttonText }}
        </h3>
        <slot />
        <div class="grid grid-cols-2 gap-6">
          <button
            class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
            @click="closeDialog"
          >
            Close
          </button>
          <button
            class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
            @click="submitDialog"
          >
            Save
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
