import { DropDownButton } from "@progress/kendo-react-buttons";
import { SVGIcon } from "@progress/kendo-react-common";
import { Align, PopupAnimation } from "@progress/kendo-react-popup";

export interface ButtonItemProps {
  className?: string;
  dataItem: any;
  focused?: boolean;
  id?: string;
  index?: number;
  item?: null | React.ComponentType<{ item: any; itemIndex: number }>;
  render?:
    | React.ComponentType<{ item: any; itemIndex: number }>
    | ((
        li: React.ReactElement<HTMLLIElement>,
        props: ButtonItemProps
      ) => React.ReactNode);
  textField?: string;
  onClick?: (event: React.MouseEvent<HTMLLIElement>, index?: number) => void;
  onDown?: (
    event: React.PointerEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>
  ) => void;
}

export interface ButtonsPopupSettings {
  anchorAlign?: Align;
  animate?: boolean | PopupAnimation;
  popupAlign?: Align;
  popupClass?: string;
}

export interface DropDownButtonBlurEvent {
  nativeEvent: any;
  syntheticEvent: React.SyntheticEvent<any>;
  target: DropDownButton;
}

export interface DropDownButtonCloseEvent {
  nativeEvent: any;
  syntheticEvent: React.SyntheticEvent<any>;
  target: DropDownButton;
}

export interface DropDownButtonFocusEvent {
  nativeEvent: any;
  syntheticEvent: React.SyntheticEvent<any>;
  target: DropDownButton;
}

export interface DropDownButtonItemClickEvent {
  item: any;
  itemIndex: number;
  nativeEvent: any;
  syntheticEvent: React.SyntheticEvent<any>;
  target: DropDownButton;
}

export interface DropDownButtonOpenEvent {
  nativeEvent: any;
  syntheticEvent: React.SyntheticEvent<any>;
  target: DropDownButton;
}

export interface DropDownButtonProps {
  dataTestId?: string;
  accessKey?: string;
  ariaLabel?: string;
  buttonClass?: string;
  children?: React.ReactNode;
  className?: string;
  dir?: string;
  disabled?: boolean;
  fillMode?: null | "link" | "flat" | "outline" | "solid";
  icon?: string;
  iconClass?: string;
  id?: string;
  imageUrl?: string;
  item?: null | React.ComponentType<{ item: any; itemIndex: number }>;
  itemRender?: (item: any) => React.ReactNode;
  items?: any[];
  opened?: boolean;
  popupSettings?: ButtonsPopupSettings;
  rounded?: null | "small" | "medium" | "full" | "large";
  size?: null | "small" | "medium" | "large";
  style?: React.CSSProperties;
  svgIcon?: SVGIcon;
  tabIndex?: number;
  text?: React.ReactNode;
  textField?: string;
  themeColor?:
    | null
    | "inverse"
    | "base"
    | "success"
    | "dark"
    | "light"
    | "primary"
    | "secondary"
    | "tertiary"
    | "info"
    | "warning";
  title?: string;
  onBlur?: (event: DropDownButtonBlurEvent) => void;
  onClose?: (event: DropDownButtonCloseEvent) => void;
  onFocus?: (event: DropDownButtonFocusEvent) => void;
  onItemClick?: (event: DropDownButtonItemClickEvent) => void;
  onOpen?: (event: DropDownButtonOpenEvent) => void;
}