import { SVGIcon } from "@progress/kendo-react-common";
import { ListItemProps as KendoListItemProps } from "@progress/kendo-react-dropdowns";
import { ComboBoxBlurEvent as KendoComboBoxBlurEvent } from "@progress/kendo-react-dropdowns";
import { ComboBoxChangeEvent as KendoComboBoxChangeEvent } from "@progress/kendo-react-dropdowns";
import { ComboBoxCloseEvent as KendoComboBoxCloseEvent } from "@progress/kendo-react-dropdowns";

export interface ComboBoxProps {
  dataTestId?: string;
  id: string;
  accessKey?: string;
  adaptive?: boolean;
  adaptiveFilter?: string;
  adaptiveTitle?: string;
  allowCustom?: boolean;
  ariaDescribedBy?: string;
  ariaLabelledBy?: string;
  className?: string;
  clearButton?: boolean;
  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;
  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;
  onBlur?: (event: KendoComboBoxBlurEvent) => void;
  onChange?: (event: KendoComboBoxChangeEvent) => void;
  onClose?: (event: KendoComboBoxCloseEvent) => void;
  onFilterChange?: (event: ComboBoxFilterChangeEvent) => void;
  onFocus?: (event: any) => ComboBoxFocusEvent;
  onOpen?: (event: any) => ComboBoxOpenEvent;
  onPageChange?: (event: ComboBoxPageChangeEvent) => void;
  focusedItemIndex?: (props: FocusedItemIndexProps) => number;
  groupHeaderItemRender?: (
    li: React.ReactElement<HTMLLIElement>,
    itemProps: ListGroupItemProps
  ) => React.ReactNode;
  groupStickyHeaderItemRender?: (
    div: React.ReactElement<HTMLDivElement>,
    stickyHeaderProps: GroupStickyHeaderProps
  ) => React.ReactNode;
  itemRender?: (
    li: React.ReactElement<
      HTMLLIElement,
      string | React.JSXElementConstructor<any>
    >,
    itemProps: KendoListItemProps
  ) => React.ReactNode;
  listNoDataRender?: (
    element: React.ReactElement<
      HTMLDivElement,
      string | React.JSXElementConstructor<any>
    >
  ) => React.ReactNode;
  valueRender?: (
    rendering: React.ReactElement<
      HTMLSpanElement,
      string | React.JSXElementConstructor<any>
    >
  ) => React.ReactNode;
}
export interface PopupAnimation {}

export interface DropDownsPopupSettings {
  animate?: boolean | PopupAnimation;
  appendTo?: null | HTMLElement;
  className?: string | string[];
  height?: string | number;
  popupClass?: string;
  width?: string | number;
}
export interface VirtualizationSettings {
  pageSize: number;
  skip: number;
  total: number;
}
export interface ListGroupItemProps {
  group?: string;
  id?: string;
  render?: (
    li: React.ReactElement<HTMLLIElement>,
    itemProps: ListGroupItemProps
  ) => React.ReactNode;
}

export interface ListItemProps {
  dataItem: any;
  disabled?: boolean;
  focused: boolean;
  group?: string;
  groupMode: any;
  id?: string;
  index: number;
  selected: boolean;
  textField?: string;
  onClick?: (index: number, event: React.MouseEvent<HTMLLIElement>) => void;
  render?: (
    li: React.ReactElement<HTMLLIElement>,
    itemProps: ListItemProps
  ) => React.ReactNode;
}

export interface GroupStickyHeaderProps {
  group?: string;
  render?: (
    div: React.ReactElement<HTMLDivElement>,
    itemProps: GroupStickyHeaderProps
  ) => React.ReactNode;
}

export interface FocusedItemIndexProps {
  data: any;
  inputText: string;
  textField?: string;
}

export interface GroupHeaderItemRenderProps {
  li: React.ReactElement<HTMLLIElement>;
  itemProps: ListGroupItemProps;
}

export interface ItemRenderProps {
  li: React.ReactElement<HTMLLIElement>;
  itemProps: ListItemProps;
}

export interface ListNoDataRenderProps {
  element: React.ReactElement<HTMLDivElement>;
}
export interface FormComponentValidity {
  badInput?: boolean;
  customError: boolean;
  patternMismatch?: boolean;
  rangeOverflow?: boolean;
  rangeUnderflow?: boolean;
  stepMismatch?: boolean;
  tooLong?: boolean;
  tooShort?: boolean;
  typeMismatch?: boolean;
  valid: boolean;
  valueMissing: boolean;
}
export interface ComboBoxHandle {
  element: null | HTMLSpanElement;
  index: number;
  mobileMode: boolean;
  name: undefined | string;
  props: Readonly<ComboBoxProps>;
  validity: FormComponentValidity;
  value: any;
}

export interface ComboBoxBlurEvent {
  nativeEvent: Event;
  syntheticEvent: React.SyntheticEvent<HTMLElement>;
  target: ComboBoxHandle;
}
export interface ComboBoxChangeEvent {
  nativeEvent: Event;
  syntheticEvent: React.SyntheticEvent<HTMLElement>;
  target: ComboBoxHandle;
  value: any;
}
export interface ComboBoxCloseEvent {
  nativeEvent: Event;
  syntheticEvent: React.SyntheticEvent<HTMLElement>;
  target: ComboBoxHandle;
}
export interface ComboBoxFilterChangeEvent {
  nativeEvent: Event;
  syntheticEvent: React.SyntheticEvent<HTMLElement>;
  target: any;
}
export interface ComboBoxFocusEvent {
  nativeEvent: Event;
  syntheticEvent: React.SyntheticEvent<HTMLElement>;
  target: any;
}

export interface ComboBoxOpenEvent {
  nativeEvent: Event;
  syntheticEvent: React.SyntheticEvent<HTMLElement>;
  target: any;
}

export interface ComboBoxPageChangeEvent {
  nativeEvent: Event;
  page: Page;
  syntheticEvent: React.SyntheticEvent<HTMLElement>;
  target: any;
}

export interface Page {
  skip: number;
  take: number;
}

export interface ValueRenderProps {
  rendering: React.ReactElement<
    HTMLSpanElement,
    string | React.JSXElementConstructor<any>
  >;
}