<script setup lang="ts">
const props = defineProps<{
  width?: string;
  height?: string;
  maxWidth?: string;
  footer?: boolean;
  // Cannot emit as it cannot control when user wanted to interrupt close state (e.g. remain open)
  onClose?: (fn: (state?: boolean) => void, ...args: unknown[]) => void;
  onOpen?: (fn: (state?: boolean) => void, ...args: unknown[]) => void;
}>();
defineEmits<{
  (e: 'submit', v: Event | SubmitEvent): void;
}>();

function update(value: boolean) {
  if (value === false) {
    if (props.onClose) {
      props.onClose((v) => (state.value = v === undefined ? false : v));
    } else {
      state.value = false;
    }
  }
}

const state = defineModel({ default: false });
</script>

<template>
  <q-dialog
    :model-value="state"
    @update:model-value="update"
    @before-show="() => onOpen?.((v) => (state = v === undefined ? true : v))"
  >
    <q-form
      @submit.prevent="(e) => $emit('submit', e)"
      greedy
      class="surface-1 rounded"
      :style="{
        borderRadius: 'var(--radius-2)',
        padding: '0',
        width: $q.screen.xs ? '100%' : width ? width : '85%',
        height: height ? height : 'calc(100vh - 64px)',
        maxWidth: $q.screen.xs ? '100%' : maxWidth ? maxWidth : '85%',
      }"
    >
      <div class="column full-height">
        <!-- NOTE: DIALOG HEADER -->
        <div class="form-header q-py-sm q-px-lg">
          <slot name="header" />
        </div>

        <!-- NOTE: DIALOG BODY -->
        <div
          class="col full-height column full-width"
          :class="{ dark: $q.dark.isActive }"
        >
          <slot />
        </div>

        <!-- NOTE: DIALOG FOOTER -->
        <div
          v-if="footer || $slots.footer"
          class="dialog-footer row items-center full-width justify-between q-px-md q-py-md surface-1"
        >
          <slot name="footer"></slot>
        </div>
      </div>
    </q-form>
  </q-dialog>
</template>

<style scoped lang="scss">
.form-header {
  border-bottom: 1px solid var(--border-color);
}

.dialog-body {
  flex: 1;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.dialog-footer {
  border-top: 1px solid var(--border-color);
}
</style>
