import { FormatsConfig } from '@vuepic/vue-datepicker'

export type TextInputProps = {
  required?: boolean
  placeholder?: string
  label?: string
  labelPosition?: 'top' | 'left'
  labelAlign?: 'left' | 'center' | 'right'
  labelWidth?: string
  width?: string
  icon?: string
  disabled?: boolean
  readonly?: boolean
  maxlength?: number
  min?: Date | string
  max?: Date | string
  height?: string
  maxHeight?: string
  bgColor?: string
  currencyFormatter?: Intl.NumberFormat
  dateformat?: FormatsConfig | null
  autosave?: (value: string) => Promise<void>
  autosaveOnBlur?: boolean
  error?: string
} & (
  | {
      modelValue: string
      type: 'text' | 'textarea' | 'password' | 'email' | 'tel' | 'url' | 'date' | 'datetime'
    }
  | {
      modelValue: number
      type: 'number' | 'money'
    }
)

export interface TextInputEmits {
  (e: 'update:modelValue', value: string | number): void
  (e: 'changed'): void
  (e: 'saved'): void
  (e: 'focus'): void
  (e: 'blur'): void
  (e: 'keydown', event: KeyboardEvent): void
}

export interface TextInputComponent {
  focus: () => void
  blur: () => void
}