<script setup lang="ts">
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '@/components/ui/dialog'
import DialogCloseButton from "../DialogCloseButton/DialogCloseButton.vue"
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'
import { TooltipProvider } from '@/components/ui/tooltip'
import { Button } from '../ui/crm-button'
import { Ellipsis, Menu } from "lucide-vue-next"
import { computed } from 'vue';

const props = defineProps<{
    title?: string
    modelValue?: boolean
}>()
const emit = defineEmits(['update:modelValue', 'save', 'cancel', 'delete'])

// Dialog state
const isOpen = computed({
    get: () => props.modelValue,
    set: (value) => {
        emit('update:modelValue', value)
    }
})

const cancel = (event: Event | null) => {
    if (!event) return

    event.preventDefault()
    event.returnValue = true

    emit('cancel')
    isOpen.value = false
}


</script>

<template>
    <Dialog v-model:open="isOpen">
        <DialogContent
            class="sm:max-w-[min((100%-2rem),1152px)] grid-rows-[auto_minmax(0,1fr)_auto] h-[calc(100dvh-2rem)] gap-0 p-0 outline-none"
            @escapeKeyDown="cancel" @interactOutside="cancel">

            <DialogHeader class="p-4 md:p-6 lg:p-12 pb-0 md:pb-2 lg:pb-8 flex flex-row items-start gap-12">

                <div class="flex flex-col grow">
                    <DialogTitle class="text-primary font-bold text-left">
                        <h1>{{ title }}</h1>
                    </DialogTitle>
                    <DialogDescription>
                        <slot name="description"></slot>
                    </DialogDescription>
                </div>

                <div class="flex items-center gap-2">
                    <TooltipProvider v-if="$slots.buttons || $slots.ellipsisMenuItems">
                        <slot name="buttons"></slot>

                        <!-- Ellipsis menu -->
                        <DropdownMenu v-if="$slots.ellipsisMenuItems">
                            <DropdownMenuTrigger>
                                <Button variant="ghost" size="icon" class="">
                                    <Ellipsis class="visible-mac" />
                                    <Menu class="visible-pc" />
                                </Button>
                            </DropdownMenuTrigger>

                            <DropdownMenuContent align="end">
                                <slot name="ellipsisMenuItems"></slot>
                            </DropdownMenuContent>
                        </DropdownMenu>

                        <DialogClose as-child>
                            <DialogCloseButton />
                        </DialogClose>
                    </TooltipProvider>
                </div>


            </DialogHeader>

            <div class="flex flex-row">
                <div class="p-4 md:p-6 lg:p-12 pt-0! grow  overflow-y-auto">
                    <slot name="content"></slot>
                </div>
                <aside class="w-120 p-4 md:p-6 lg:p-12 pt-0! flex flex-col gap-4" v-if="$slots.sidebar">
                    <slot name="sidebar"></slot>
                </aside>
            </div>
        </DialogContent>
    </Dialog>
</template>