import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'

export type DatePickerType = 'year' | 'month' | 'date' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'dates'
export type FirstDayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7

export interface DisabledDateChecker {
  /**
   * Determine if `date` will be disabled in the picker
   *
   * @param date The date to check
   * @returns if `date` will be disabled in the picker
   */
  (date: Date): boolean
}

// Picked date range
export interface DateRange {
  minDate: Date,
  maxDate: Date
}

export interface PickEventHandler {
  /**
   * Callback function that triggers when picks a date range
   *
   * @param dateRange The selected date range
   */
  (dateRange: DateRange): void
}

export interface ShortcutClickEventHandler {
  /**
   * Callback function that triggers when clicking on a shortcut.
   * You can change the picker value by emitting the pick event.
   * Example: `vm.$emit('pick', new Date())`
   */
  (vm: ElDatePicker): void
}

/** Shortcut options */
export interface Shortcut {
  /** Title of the shortcut */
  text: string,

  /** Callback function that triggers when picks a date range */
  onClick?: ShortcutClickEventHandler
}

/** Options of el-date-picker */
export interface DatePickerOptions {
  /** An object array to set shortcut options */
  shortcuts?: Shortcut[]

  /** A function determining if a date is disabled. */
  disabledDate?: DisabledDateChecker

  /** First day of week */
  firstDayOfWeek?: FirstDayOfWeek

  /** A callback that triggers when the seleted date is changed. Only for daterange and datetimerange. */
  onPick?: PickEventHandler
}

/** DatePicker Component */
export declare class ElDatePicker extends ElementUIComponent {
  /** The value of the date picker */
  value: Date | string | Date[] | string[]

  /** Whether DatePicker is read only */
  readonly: boolean

  /** Whether DatePicker is disabled */
  disabled: boolean

  /** Size of Input */
  size: ElementUIComponentSize

  /** Whether the input is editable */
  editable: boolean

  /** Whether to show clear button */
  clearable: boolean

  /** Placeholder */
  placeholder: string

  /** Placeholder for the start date in range mode */
  startPlaceholder: string

  /** Placeholder for the end date in range mode */
  endPlaceholder: string

  /** Type of the picker */
  type: DatePickerType

  /** Format of the picker */
  format: string

  /** Alignment */
  align: ElementUIHorizontalAlignment

  /** Custom class name for DatePicker's dropdown */
  popperClass: string

  /** Additional options, check the table below */
  pickerOptions: DatePickerOptions

  /** Range separator */
  rangeSeparator: string

  /** Default date of the calendar */
  defaultValue: Date | number | string

  /** Format of binding value. If not specified, the binding value will be a Date object */
  valueFormat: string

  /** name for the inner native input */
  name: string

  /**
   * Focus the Input component
   */
  focus (): void
}