<script lang="ts" setup>
import AppBox from '../app/AppBox.vue';

defineProps<{
  width?: string;
  maxWidth?: string;
  close?: (...args: unknown[]) => void;
}>();

const dialogState = defineModel('state', { default: true });
</script>

<template>
  <q-dialog v-model="dialogState" full-width full-height>
    <AppBox
      style="
        padding: 0;
        border-radius: var(--radius-2);
        max-height: 100%;
        flex-wrap: nowrap;
      "
      class="column"
    >
      <div class="row items-center q-py-sm q-px-md bordered-b">
        <div style="flex: 1"><slot name="title" /></div>
        <div>
          <q-btn
            round
            flat
            icon="mdi-close"
            padding="xs"
            class="close-btn"
            :class="{ dark: $q.dark.isActive }"
            v-close-popup
          />
        </div>
      </div>
      <div
        class="dialog-body"
        style="
          flex: 1;
          overflow-y: auto;
          position: relative;
          display: flex;
          flex-direction: column;
          height: 100%;
        "
      >
        <slot />
      </div>
      <div
        class="row items-center q-py-sm q-px-md bordered-t"
        v-if="$slots.footer"
      >
        <slot name="footer" />
      </div>
    </AppBox>
  </q-dialog>
</template>

<style scoped>
.close-btn {
  color: hsl(var(--negative-bg));
  background-color: hsla(var(--negative-bg) / 0.1);

  &.dark {
    background-color: transparent;
    border: 1px solid hsl(var(--negative-bg));
  }
}

.dialog-body > :deep(*) {
  max-height: calc(100vh - 200px);
}
</style>
