// Type definitions for agate/DatePicker

import * as React from "react";
import { SkinnableProps as agate_Skinnable_SkinnableProps } from "@enact/agate/Skinnable";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface DatePickerBaseProps {
  /**
   * The  `day`  component of the Date.
   *
   * The value should be a number between 1 and  `maxDays` .
   */
  day: number;
  /**
   * The number of days in the month.
   */
  maxDays: number;
  /**
   * The number of months in the year.
   */
  maxMonths: number;
  /**
   * The  `month`  component of the Date.
   *
   * The value should be a number between 1 and  `maxMonths` .
   */
  month: number;
  /**
   * The order in which the component pickers are displayed.
   *
   * The value should be an array of 3 strings containing one of  `'m'` ,  `'d'` , and  `'y'` .
   */
  order: string[];
  /**
   * The  `year`  component of the Date.
   */
  year: number;
  /**
 * The "aria-label" for the day picker.
 * 
 * If not specified, the "aria-label" for the day picker will be
a combination of the current value and 'day change a value with up down button'.
 */
  dayAriaLabel?: string;
  /**
   * When it's  `true` , it changes the direction of the transition animation for the day.
   */
  dayReverseTransition?: boolean;
  /**
   * Disables the  `DatePicker` .
   */
  disabled?: boolean;
  /**
   * The maximum selectable  `year`  value.
   */
  maxYear?: number;
  /**
   * The minimum selectable  `year`  value.
   */
  minYear?: number;
  /**
 * The "aria-label" for the month picker.
 * 
 * If not specified, the "aria-label" for the month picker will be
a combination of the current value and 'month change a value with up down button'.
 */
  monthAriaLabel?: string;
  /**
   * Called when the  `date`  component of the Date changes.
   */
  onDateChange?: Function;
  /**
   * Called when the  `month`  component of the Date changes.
   */
  onMonthChange?: Function;
  /**
   * Called when the component is removed when it had focus.
   */
  onSpotlightDisappear?: Function;
  /**
   * Called when the  `year`  component of the Date changes.
   */
  onYearChange?: Function;
  /**
   * Disables 5-way spotlight from navigating into the component.
   */
  spotlightDisabled?: boolean;
  /**
 * The "aria-label" for the year picker.
 * 
 * If not specified, the "aria-label" for the year picker will be
a combination of the current value and 'year change a value with up down button'.
 */
  yearAriaLabel?: string;
}
/**
 * A date selection component.
 * 
 * This component is most often not used directly but may be composed within another component as it
is within  DatePicker  .
 */

export class DatePickerBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, DatePickerBaseProps>
> {}

export interface DatePickerDecoratorProps
  extends agate_Skinnable_SkinnableProps {}
export function DatePickerDecorator<P>(
  Component: React.ComponentType<P> | string
): React.ComponentType<P & DatePickerDecoratorProps>;

export interface DatePickerProps
  extends Omit<
    Merge<DatePickerBaseProps, DatePickerDecoratorProps>,
    "day" | "maxDays" | "maxMonths" | "month" | "order" | "year"
  > {
  /**
   * The initial value used when  `value`  is not set.
   */
  defaultValue?: Date;
  /**
   * The selected date
   */
  value?: Date;
}
/**
 * A date selection component, ready to use in Agate applications.
 * 
 * `DatePicker`  may be used to select the year, month, and day. It uses a standard  `Date`  object for
its  `value`  which can be shared as the  `value`  for a
 TimePicker   to select both a date and time.
 * 
 * By default,  `DatePicker`  maintains the state of its  `value`  property. Supply the
 `defaultValue`  property to control its initial value. If you wish to directly control updates
to the component, supply a value to  `value`  at creation time and update it in response to
 `onChange`  events.
 * 
 * Usage:
 * ```
<DatePicker
  defaultValue={selectedDate}
  onChange={handleChange}
/>
```
 */

export class DatePicker extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, DatePickerProps>
> {}

/**
 * Converts a standard  `Date`  object into a locale-specific string.
 */
export function dateToLocaleString(date: Date): any;

export default DatePicker;
