import type { Component } from 'vue'
import type { SchemaDefinition } from '../form-flow/form-flow'

export type DialogWidth = 's' | 'm' | 'l' | 'xl' | 'full'
export type DialogPosition = 'center' | 'left' | 'right' | 'top' | 'bottom'
export type DialogAction = 'submit' | 'cancel' | 'delete'

export interface DialogBaseOptions {
	title?: string
	width?: DialogWidth
	position?: DialogPosition
	dismissable?: boolean
	class?: string
}

export interface DialogFormOptions<T extends Record<string, any> = Record<string, any>> extends DialogBaseOptions {
	schema: SchemaDefinition
	modelValue?: T
	/** Runs before close on submit - throw to keep dialog open with error */
	onSubmit?: (data: T) => Promise<void> | void
	/** If provided, shows delete button - throw to keep dialog open with error */
	onDelete?: (data: T) => Promise<void> | void
	/** Custom button text */
	submitText?: string
	cancelText?: string
	deleteText?: string
}

export interface DialogFormResult<T> {
	action: DialogAction
	data: T
}

export interface DialogConfirmOptions extends DialogBaseOptions {
	message: string
	confirmText?: string
	cancelText?: string
	confirmColor?: 'primary' | 'red' | 'green' | 'blue'
}

export interface DialogOpenOptions extends DialogBaseOptions {
	component: Component | string
	props?: Record<string, any>
}

export interface DialogRef {
	close: () => void
}

export interface DialogApi {
	form: <T extends Record<string, any> = Record<string, any>>(
		options: DialogFormOptions<T>
	) => Promise<DialogFormResult<T>>
	confirm: (options: string | DialogConfirmOptions) => Promise<boolean>
	open: (options: DialogOpenOptions) => DialogRef
}

// Width presets in pixels
export const DIALOG_WIDTHS: Record<DialogWidth, string> = {
	s: '400px',
	m: '540px',
	l: '720px',
	xl: '960px',
	full: '100%'
}