import {
  MultiSelectBlurEvent as KendoMultiSelectBlurEvent,
  MultiSelectChangeEvent as KendoMultiSelectChangeEvent,
  MultiSelectCloseEvent as KendoMultiSelectCloseEvent,
  MultiSelectFilterChangeEvent as KendoMultiSelectFilterChangeEvent,
  MultiSelectFocusEvent as KendoMultiSelectFocusEvent,
  MultiSelectOpenEvent as KendoMultiSelectOpenEvent,
  MultiSelectPageChangeEvent as KendoMultiSelectPageChangeEvent,
} from "@progress/kendo-react-dropdowns";
import { MultiSelectCancelEvent as KendoMultiSelectCancelEvent } from "@progress/kendo-react-dropdowns/dist/npm/MultiSelect/MultiSelectProps";
import {
  DropDownsPopupSettings,
  VirtualizationSettings,
} from "../ComboBox/ComboBoxProps";

export interface TagData {
  text: string;
  data: Array<any>;
}

export interface MultiSelectProps {
  dataTestId?: string;
  accessKey?: string;
  adaptive?: boolean;
  adaptiveFilter?: string;
  adaptiveTitle?: string;
  allowCustom?: boolean;
  ariaDescribedBy?: string;
  ariaLabelledBy?: string;
  autoClose?: boolean;
  className?: string;
  data?: any[];
  dataItemKey?: string;
  defaultValue?: any[];
  dir?: string;
  disabled?: boolean;
  fillMode?: null | "flat" | "outline" | "solid";
  filter?: string;
  filterable?: boolean;
  footer?: React.ReactNode;
  groupField?: string;
  header?: React.ReactNode;
  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;
  tabIndex?: number;
  tags?: TagData[];
  textField?: string;
  valid?: boolean;
  validationMessage?: string;
  validityStyles?: boolean;
  value?: any[];
  virtual?: VirtualizationSettings;
  focusedItemIndex?: (
    data: any,
    inputText: string,
    textField?: string
  ) => number;
  groupHeaderItemRender?: (
    li: React.ReactElement,
    itemProps: any
  ) => React.ReactNode;
  groupStickyHeaderItemRender?: (
    div: React.ReactElement,
    stickyHeaderProps: any
  ) => React.ReactNode;
  itemRender?: (li: React.ReactElement, itemProps: any) => React.ReactNode;
  listNoDataRender?: (element: React.ReactElement) => React.ReactNode;
  onBlur?: (event: KendoMultiSelectBlurEvent) => void;
  onCancel?: (event: KendoMultiSelectCancelEvent) => void;
  onChange?: (event: KendoMultiSelectChangeEvent) => void;
  onClose?: (event: KendoMultiSelectCloseEvent) => void;
  onFilterChange?: (event: KendoMultiSelectFilterChangeEvent) => void;
  onFocus?: (event: KendoMultiSelectFocusEvent) => void;
  onOpen?: (event: KendoMultiSelectOpenEvent) => void;
  onPageChange?: (event: KendoMultiSelectPageChangeEvent) => void;
  tagRender?: (tagData: TagData, tag: React.ReactElement) => React.ReactElement;
}