import { SVGIcon } from "@progress/kendo-react-common";
import {
  DropDownsPopupSettings,
  VirtualizationSettings,
} from "../ComboBox/ComboBoxProps";

export interface MultiColumnComboBoxColumn {
  uniqueKey?: string;
  field?: string;
  header?: React.ReactNode;
  width?: string | number;
}

export interface MultiColumnComboBoxProps {
  dataTestId?: string;
  accessKey?: string;
  adaptive?: boolean;
  adaptiveFilter?: string;
  adaptiveTitle?: string;
  allowCustom?: boolean;
  ariaDescribedBy?: string;
  ariaLabelledBy?: string;
  className?: string;
  clearButton?: boolean;
  columns: MultiColumnComboBoxColumn[];
  data?: any[];
  dataItemKey?: string;
  defaultValue?: any;
  dir?: string;
  disabled?: boolean;
  fillMode?: null | "flat" | "outline" | "solid";
  filter?: null | string;
  filterable?: boolean;
  footer?: React.ReactNode;
  groupField?: string;
  groupMode?: string;
  header?: React.ReactNode;
  iconClassName?: string;
  id?: string;
  label?: string;
  loading?: boolean;
  name?: string;
  opened?: boolean;
  placeholder?: string;
  popupSettings?: DropDownsPopupSettings;
  required?: boolean;
  rounded?: null | "small" | "medium" | "full" | "large";
  size?: null | "small" | "medium" | "large";
  skipDisabledItems?: boolean;
  style?: React.CSSProperties;
  suggest?: boolean;
  svgIcon?: SVGIcon;
  tabIndex?: number;
  textField?: string;
  title?: string;
  valid?: boolean;
  validationMessage?: string;
  validityStyles?: boolean;
  value?: any;
  virtual?: VirtualizationSettings;
  focusedItemIndex?: (
    data: any,
    inputText: string,
    textField?: string
  ) => number;
  groupHeaderItemRender?: (
    li: React.ReactElement<HTMLLIElement>,
    itemProps: any
  ) => React.ReactNode;
  groupStickyHeaderItemRender?: (
    div: React.ReactElement<HTMLDivElement>,
    stickyHeaderProps: any
  ) => React.ReactNode;
  itemRender?: (
    li: React.ReactElement<HTMLLIElement>,
    itemProps: any
  ) => React.ReactNode;
  listNoDataRender?: (
    element: React.ReactElement<HTMLDivElement>
  ) => React.ReactNode;
  onBlur?: (event: any) => void;
  onChange?: (event: any) => void;
  onClose?: (event: any) => void;
  onFilterChange?: (event: any) => void;
  onFocus?: (event: any) => void;
  onOpen?: (event: any) => void;
  onPageChange?: (event: any) => void;
  valueRender?: (
    rendering: React.ReactElement<HTMLSpanElement>
  ) => React.ReactNode;
}