import { Sortable as KendoSortable } from "@progress/kendo-react-sortable";

export interface SortableProps {
  dataTestId?: string;
  animation?: boolean;
  className?: string;
  data: object[];
  disabledField?: string;
  emptyItemUI?: React.ComponentType<SortableEmptyItemUIProps>;
  idField: string;
  itemUI: React.ComponentType<SortableItemUIProps>;
  navigation?: boolean;
  style?: React.CSSProperties;
  tabIndex?: number;
  onDragEnd?: (event: SortableOnDragEndEvent) => void;
  onDragOver?: (event: SortableOnDragOverEvent) => void;
  onDragStart?: (event: SortableOnDragStartEvent) => void;
  onNavigate?: (event: SortableOnNavigateEvent) => void;
}

export interface SortableItemUIProps {
  attributes?: any;
  dataItem: any;
  isActive: boolean;
  isDisabled: boolean;
  isDragCue: boolean;
  isDragged: boolean;
  style: React.CSSProperties;
  forwardRef?: (element: HTMLElement) => void;
}

export interface SortableEmptyItemUIProps {
  message: string;
}

export interface SortableOnDragEndEvent {
  newState: object[];
  nextIndex: number;
  prevIndex: number;
  target: KendoSortable;
}

export interface SortableOnDragOverEvent {
  newState: object[];
  nextIndex: number;
  prevIndex: number;
  target: KendoSortable;
}

export interface SortableOnDragStartEvent {
  element: HTMLElement;
  prevIndex: number;
  target: KendoSortable;
}

export interface SortableOnNavigateEvent {
  newState: object[];
  nextIndex: number;
  prevIndex: number;
  target: KendoSortable;
}