<script lang="ts" setup>
import Card from '../components/Card.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">
			<Card>
				<p class="w-24 text-center text-6xl">+</p>
				<span class="text-lg" dark>{{ buttonText }}</span>
			</Card>
		</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 top-20 mx-auto p-5 w-96 shadow-lg 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></slot>
				<div class="grid grid-cols-2 gap-6">
					<button
						@click="closeDialog"
						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">
						Close
					</button>
					<button
						@click="submitDialog"
						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">
						Save
					</button>
				</div>
			</div>
		</div>
	</div>
</template>
