<!-- Popup component -->
<script setup lang="ts">
import { useTemplateRef } from 'vue';
import Button from '../base/Button.vue';
import IconClose from '../icons/IconClose.vue';

// Props
const { cancelButtonText, confirmButtonText, heading, placeholder } = defineProps<{
    cancelButtonText: string;
    confirmButtonText: string;
    heading: string;
    placeholder: string;
}>();

// Emits
const emit = defineEmits<{
    popupConfirm: [];
    popupCancel: [];
}>();

// Store popup in ref
const popupRef = useTemplateRef('popup');

// Open popup
const openPopup = () => {
    popupRef.value.showModal();
};

// Close popup
const closePopup = () => {
    popupRef.value.close();

    // Reset the value
    value.value = '';

	emit('popupCancel');
};

// Expose both functions to the parent
defineExpose({ openPopup, closePopup });

// Define returned value
const value = defineModel<string>();
</script>

<template>
    <dialog
        ref="popup"
        class="group fixed left-1/2 top-1/2 m-0 grid place-items-center pointer-events-none opacity-0 -translate-x-1/2 -translate-y-1/2 size-full bg-transparent transition-opacity duration-300 open:pointer-events-auto open:opacity-100 backdrop:bg-base-500/60"
    >
        <div
            class="flex flex-col items-center gap-7 p-5 w-full max-w-[600px] bg-white -translate-y-16 group-open:translate-y-0 transition-transform duration-300 rounded-lg"
        >
            <!-- Popup Header -->
            <div class="flex justify-between items-center w-full">
                <p class="text-md">{{ heading }}</p>
                <IconClose class="cursor-pointer" @click="closePopup" @keypress.enter.space="closePopup" tabindex="0" />
            </div>

            <!-- Popup Body -->
            <textarea
                class="w-full px-2 py-1 text-base leading-base placeholder:text-base-200 text-base-500 rounded border border-neutral-500 resize-none min-h-[134px]"
                v-model="value"
                :placeholder
            ></textarea>

            <!-- Popup controls -->
            <div class="flex justify-end flex-col md:flex-row items-center gap-3 w-full">
                <Button class="max-md:w-full" :text="cancelButtonText" type="secondary" @click.prevent="closePopup" />
                <Button
                    class="max-md:w-full"
                    :text="confirmButtonText"
                    type="primary"
                    @click.prevent="emit('popupConfirm')"
                />
            </div>
        </div>
    </dialog>
</template>

<style scoped></style>
