<script setup lang="ts">
import { ref, computed, watch, onMounted, onUpdated, useTemplateRef } from "vue"
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog';
import { Customer } from '@/types'

const props = defineProps<{
    modelValue: Customer | null,
    isOpen: boolean
}>()

const isOpen = computed({
    get: () => props.isOpen,
    set: (value) => {
        emit('update:open', value)
    }
})

const emit = defineEmits(['update:modelValue', 'update:open', 'save', 'delete'])

const saveChanges = () => {
    // if (invoice.value) {
    //     emit('save', invoice.value)
    //     isOpen.value = false
    // }
}

const cancelChanges = (event: Event | null) => {
    // if (isDirty.value) {
    //     alert.value.title = "Wirklich schließen?"
    //     alert.value.message = "Es gibt ungespeicherte Änderungen, die dann verloren gehen."
    //     alert.value.cancelText = "Abbrechen"
    //     alert.value.onCancel = () => {
    //         event?.preventDefault()
    //         event.returnValue = true
    //         alert.value.open = false
    //     }
    //     alert.value.confirmText = "Schließen"
    //     alert.value.onConfirm = () => {
    //         emit('cancel')
    //         isOpen.value = false
    //         alert.value.open = false
    //     }
    //     alert.value.open = true
    // } else {
    //     emit('cancel')
    //     isOpen.value = false
    // }
}

</script>

<template>
    <Dialog id="customer-dialog" v-model:open="isOpen">
        <DialogContent
            class="sm:max-w-[min((100%-2rem),1152px)] grid-rows-[auto_minmax(0,1fr)_auto] p-0 h-[calc(100dvh-2rem)]"
            @escapeKeyDown="cancelChanges" @interactOutside="cancelChanges">
            <DialogHeader class="px-3 pt-3 flex flex-row justify-end">
                <DialogTitle>Edit profile</DialogTitle>
                <DialogDescription>
                    Make changes to your profile here. Click save when you're done.
                </DialogDescription>
            </DialogHeader>

            <DialogFooter>
                Save changes
            </DialogFooter>
        </DialogContent>
    </Dialog>
</template>

<style></style>