import type { Arrayable } from 'element-plus/es/utils'
import type { FormItemRule } from 'element-plus'

export interface FormPanelType<T = any> {
  title: string
  detailsLoader: (id?: string) => Promise<T | undefined | null | void>
  doSubmit: (data: T) => Promise<boolean | void>
  rules?: Partial<Record<string, Arrayable<FormItemRule>>>
  labelWidth: string
  width: string
  modal: boolean
  appendToBody: boolean
}

export function buildFormPanelProps<T = any>(props: DeepPartial<FormPanelType<T>>) {
  if (props.labelWidth == null) {
    props.labelWidth = '80px'
  }
  if (props.appendToBody == null) {
    props.appendToBody = false
  }
  if (props.width == null) {
    props.width = 'fit-content'
  }
  if (props.modal == null) {
    props.modal = false
  }
  return reactive(props as FormPanelType<T>)
}
