import {
  MenuRendererTriggerProps,
  MenuRendererTriggerState,
} from "../MenuRenderer/MenuRenderer";

export interface DateRangePickerValueWithDates {
  startDate: Date;
  endDate: Date;
}

export interface DateRangePickerPreset {
  name: string;
  startDate: Date;
  endDate: Date;
}

export type DateRangePickerValue =
  | DateRangePickerValueWithDates
  | null
  | DateRangePickerPreset;

interface SharedDateRangePickerProps {
  /**
   * These are the options that appear above "Custom" when the `DateRangePicker` is opened.
   * Each preset object should include a `name`, `startDate`, and `endDate`.
   */
  presets: DateRangePickerPreset[];
  /**
   * This determines how the menu aligns with the dropdown control. If right aligned, the
   * custom date selection UI will appear to the left of the list of presets.
   */
  align?: "left" | "right";
  /**
   * The earliest custom date that can be selected
   */
  minDate?: Date;
  /**
   * The latest custom date that can be selected
   */
  maxDate?: Date;
  /**
   * Classes to be added to the outermost element
   */
  className?: string;
}

export interface DateRangePickerLegacyProps extends SharedDateRangePickerProps {
  /**
   * Accepts a `DateRangePickerPreset` (`{ name: string; startDate: Date; endDate: Date}`),
   * a custom value (same as a preset but without a `name`), or `null`
   */
  value: DateRangePickerValue;
  /**
   * Called every time a new date range is selected
   */
  onChange: (newValue: DateRangePickerValue) => void;
}

export interface DateRangePickerProps extends SharedDateRangePickerProps {
  /**
   * Accepts a `DateRangePickerPreset` (`{ name: string; startDate: Date; endDate: Date}`),
   * a custom value (same as a preset but without a `name`), or `null`
   */
  value: DateRangePickerPreset;
  /**
   * Called every time a new date range is selected
   */
  onChange: (newValue: DateRangePickerPreset) => void;
  /**
   * Set the max date for the calendar
   */
  onCustomChange: () => void;
  /**
   * When the user clicks the "Apply" button in the custom date range UI
   */
  onSave: (newValue: DateRangePickerPreset) => void;
  /**
   * When the user clicks the "Cancel" button in the custom date range UI
   */
  onCancel: () => void;
  /**
   * Disable the button that opens the date picker
   */
  disabled?: boolean;
  /**
   * Specific date to open the date picker to
   */
  openToDate?: Date;
  /**
   * Custom button to replace the default button
   */
  customButton?: (
    props: {
      children: React.ReactNode;
      disabled?: boolean;
      className?: string;
    } & MenuRendererTriggerProps,
    state: MenuRendererTriggerState,
  ) => React.ReactElement;
}