import { CreateElement, VNode } from 'vue'
import { ElementUIComponent } from './component'

export type TransferPanelPosition = 'left' | 'right'

export interface TransferData {
  key: any
  label: string
  disabled: boolean
}

export interface TransferFormat {
  noChecked: string
  hasChecked: string
}

export interface TransferProps {
  key: string
  label: string
  disabled: string
}

export interface TransferRenderContent {
  /**
   * Render function for a specific option
   *
   * @param h The render function
   * @param option The option data object
   */
  (h: CreateElement, option: TransferData): VNode
}

/** Transfer Component */
export declare class ElTransfer extends ElementUIComponent {
  /** Data source */
  data: TransferData[]

  /** Whether Transfer is filterable */
  filterable: boolean

  /** Placeholder for the filter input */
  filterPlaceholder: string

  /** Custom filter method */
  filterMethod: (query: string, item: TransferData) => boolean

  /** Order strategy for elements in the target list */
  targetOrder: string

  /** Custom list titles */
  titles: string[]

  /** Custom button texts */
  buttonTexts: string[]

  /** Custom render function for data items */
  renderContent: TransferRenderContent

  /** Texts for checking status in list header */
  format: TransferFormat

  /** Prop aliases for data source */
  props: TransferProps

  /** Key array of initially checked data items of the left list */
  leftDefaultChecked: any[]

  /** Key array of initially checked data items of the right list */
  rightDefaultChecked: any[]

  /** Clear the query text in specified panel */
  clearQuery (which: TransferPanelPosition): void
}