import {
  CalendarHeaderTitleProps as KendoCalendarHeaderTitleProps,
  CalendarCellProps as KendoCalendarCellProps,
  MultiViewCalendar as KendoMultiViewCalendar,
  SelectionRange as KendoSelectionRange,
  CalendarWeekCellProps as KendoCalendarWeekCellProps,
} from "@progress/kendo-react-dateinputs";

type SelectionRangeEnd = "start" | "end" | null;

type ActiveView = "month" | "year" | "decade" | "century";

type MultiViewCalendarMode = "single" | "multiple" | "range";

export interface MultiViewCalendarChangeEvent<T = KendoMultiViewCalendar> {
  syntheticEvent: React.SyntheticEvent<any>;
  nativeEvent?: any;
  value: Date | Date[] | KendoSelectionRange | null;
  target: T;
}

export interface MultiViewCalendarProps {
  dataTestId?: string;
  activeRangeEnd?: SelectionRangeEnd;
  allowReverse?: boolean;
  ariaDescribedBy?: string;
  ariaLabelledBy?: string;
  bottomView?: ActiveView;
  cell?: React.ComponentType<KendoCalendarCellProps>;
  className?: string;
  defaultActiveView?: ActiveView;
  defaultValue?: null | Date | KendoSelectionRange | Date[];
  disabled?: boolean;
  focusedDate?: Date;
  headerTitle?: React.ComponentType<KendoCalendarHeaderTitleProps>;
  id?: string;
  max?: Date;
  min?: Date;
  mode?: MultiViewCalendarMode;
  tabIndex?: number;
  topView?: ActiveView;
  value?: null | Date | KendoSelectionRange | Date[];
  views?: number;
  weekCell?: React.ComponentType<KendoCalendarWeekCellProps>;
  weekNumber?: boolean;
  onBlur?: (event: FocusEvent) => void;
  onChange?: (
    event: MultiViewCalendarChangeEvent<KendoMultiViewCalendar>
  ) => void;
  onFocus?: (event: FocusEvent) => void;
}