import { default as React } from 'react';
import { DateRange, DayPickerProps, Locale, Matcher, OnSelectHandler } from 'react-day-picker';
import { Breakpoint, BreakpointSupport } from '../../../helpers';
import { ModalContentProps } from '../../overlays/modal/modal-content/modal-content';
import { MultiValueFieldProps } from '../multi-value-field/multi-value-field';
import { TextFieldForwardRef, TextFieldProps } from '../textfield/textfield';
export type DateFieldModal = boolean | Exclude<Breakpoint, 'xs'>;
export type DateFieldMode = 'single' | 'multiple' | 'range';
export type CalendarView = 'days' | 'months' | 'years';
export type DateFieldCalendarTrigger = 'input' | 'button';
type DateTextFieldProps = Omit<TextFieldProps, 'label' | 'id'>;
type DateMultiValueFieldProps = Omit<MultiValueFieldProps, 'label' | 'id'>;
/**
 * Subset of DateField props that can be overridden per breakpoint via the
 * `BreakpointSupport` API (e.g. `<DateField useNativePicker md={{ useNativePicker: false }} />`).
 */
type DateFieldBreakpointProps = {
    /**
     * Whether the calendar popover is interactive.
     * @default true
     */
    enableCalendar?: boolean;
    /**
     * What opens the calendar — only the icon (`'button'`) or anywhere in the input (`'input'`).
     * @default button
     */
    calendarTrigger?: DateFieldCalendarTrigger;
    /**
     * Swap the custom calendar for the browser's native `<input type="date">`.
     * Only applies to `mode='single'`.
     * @default false
     */
    useNativePicker?: boolean;
    /**
     * Number of months shown side-by-side. In the **popover** on mobile (`< md`) values > 1 are
     * clamped to 1 — a multi-month popover gets unscrollable on a phone viewport. In a **modal** the
     * count is kept: the months wrap to a vertical stack and the modal body scrolls.
     */
    numberOfMonths?: number;
};
export interface DateFieldProps extends BreakpointSupport<DateFieldBreakpointProps>, Omit<DayPickerProps, 'mode' | 'selected' | 'onSelect' | 'numberOfMonths'> {
    /**
     * Unique identifier for the date field.
     */
    id: string;
    /**
     * Field label. Required for accessibility.
     */
    label: string;
    /**
     * Determines the selection mode of the calendar.
     * - `'single'` (default) – only one date can be selected. The `selected` prop should be a `Date` object or `undefined`.
     * - `'multiple'` – multiple individual dates can be selected. The `selected` prop should be an array of `Date` objects.
     * - `'range'` – a continuous date range can be selected. The `selected` prop should be an object with `from` and optional `to` properties, both being `Date` objects.
     *
     * @default single
     */
    mode?: DateFieldMode;
    /**
     * The currently selected date(s). The expected type depends on the `mode`:
     * - For `mode="single"`, this should be a `Date` object or `undefined`.
     * - For `mode="multiple"`, this should be an array of `Date` objects.
     * - For `mode="range"`, this should be an object with a `from` property (a `Date` object) and an optional `to` property (also a `Date` object).
     */
    selected?: Date | Date[] | DateRange | undefined;
    /**
     * Callback fired when the user selects a date or date range. The exact parameters depend on the `mode`:
     * - For `mode="single"`, the callback receives the selected `Date` object (or `undefined` if cleared).
     * - For `mode="multiple"`, the callback receives an array of selected `Date` objects.
     * - For `mode="range"`, the callback receives an object with `from` and optional `to` properties, both being `Date` objects (or `undefined` if cleared).
     */
    onSelect?: OnSelectHandler<Date | Date[] | DateRange | undefined>;
    /**
     * Disable specific dates. Accepts the same matchers as React DayPicker's `disabled` prop.
     *
     * @deprecated Use `disabledMatchers` instead — same shape, semantics, and merging
     * behaviour. The current overload re-uses the form-control `disabled` name for a
     * matcher prop, which is inconsistent with `DateTimeField`'s boolean `disabled`
     * and confusing for consumers migrating between the two siblings. `disabledMatchers`
     * stays additive for now; this overload will be replaced by `disabled?: boolean`
     * in a future major.
     */
    disabled?: Matcher | Matcher[];
    /**
     * Disable specific dates via react-day-picker matchers. Mirrors the
     * `disabledMatchers` prop on `DateTimeField` so the API is consistent across
     * the date-field family. Merges with the (deprecated) `disabled` overload —
     * if both are supplied, the union of both matcher sets is applied.
     */
    disabledMatchers?: Matcher | Matcher[];
    /**
     * Input placeholder text when no date is selected.
     */
    placeholder?: string;
    /**
     * Additional class name(s) to apply to the component container.
     */
    className?: string;
    /**
     * Custom date formatting function. Receives the selected date(s) and should return a string for display in the input field.
     * If not provided, a default formatter will be used that formats dates as "dd.MM.yyyy" in the "et-EE" locale.
     */
    formatDate?: (date: Date | Date[] | DateRange | undefined) => string;
    /**
     * Show days from adjacent months in the calendar view. Default is `true`.
     *
     * @default true
     */
    showOutsideDays?: boolean;
    /**
     * Custom date parsing function for user input. Receives the input string and should return a `Date`, an array of `Date`s, a `DateRange`, or `undefined` if the input is invalid or cleared.
     * If not provided, the component will not allow manual input and will rely solely on the calendar picker for date selection.
     */
    parseDate?: (value: string) => Date | Date[] | DateRange | undefined;
    /**
     * Initial month to display when the calendar is opened. If not provided, defaults to the month of the currently selected date or the current month if no date is selected.
     */
    initialMonth?: Date;
    /**
     * When `true`, the date field is marked as required, and the calendar will enforce that a date is selected before allowing the user to close it. Default is `false`.
     *
     * @default false
     */
    required?: boolean;
    /**
     * How the month/year selector in the calendar header is rendered.
     * Forwarded to the internal `Calendar` / `CalendarHeader`.
     * - `'dropdown'` (default) — each picker is a `<Select>` dropdown.
     * - `'grid'` — each picker opens a full grid of options.
     * @default dropdown
     */
    monthYearSelectType?: 'dropdown' | 'grid';
    /**
     * Show or hide the calendar header's previous/next navigation. When hidden, the month/year header
     * also becomes a static, non-interactive label (no dropdown / grid jumping) — so the calendar is
     * locked to the visible month(s): a clean "pick from these" view for a fixed month or range.
     * @default true
     */
    showNavigation?: boolean;
    /**
     * **Selection granularity** — controls the level at which a click finalises
     * the date selection rather than drilling further into days. Use a coarser
     * level when the consumer only needs to pick a year or a month.
     * - `'years'` — clicking a year selects Jan 1 of that year and closes; the
     *   calendar opens on the year grid.
     * - `'months'` — clicking a month selects the first day of that month; the
     *   calendar opens on the month grid.
     * - `'days'` (default) — full day-level selection; the calendar opens on
     *   the day grid as usual.
     *
     * Distinct from the *currently visible* grid — that's managed internally
     * and flips as the user navigates between year / month / day. This prop
     * is the lowest level the user can drill down to before a click commits.
     * @default 'days'
     */
    selectionLevel?: CalendarView;
    /**
     * **Initial grid** the calendar opens on, independent of `selectionLevel`.
     * Use it to start the user on the year / month grid for fast year-first
     * navigation while still letting them drill down and commit at the
     * `selectionLevel` (e.g. `initialView="years"` with the default
     * `selectionLevel="days"` opens the year grid → month grid → day grid).
     * Pair with `monthYearSelectType="grid"` so the navigation stays grid-based.
     * @default selectionLevel
     */
    initialView?: CalendarView;
    /**
     * The locale object for the calendar, used by React DayPicker. Defaults to Estonian locale.
     */
    locale?: Locale;
    /**
     * The locale code string used for date formatting. Defaults to 'et-EE'.
     */
    localeCode?: string;
    /**
     * When `true`, the calendar popover will automatically close after a date is selected. Default behavior is to close on select only in 'single' mode.
     * You can override this behavior by explicitly setting this prop to `true` or `false`.
     *
     * @default depends on mode (true for 'single', false for 'multiple' and 'range')
     */
    closeOnSelect?: boolean;
    /**
     * Custom footer content to display at the bottom of the calendar popover. Can be used to add action buttons or additional information.
     * The footer will be rendered inside the calendar popover, below the calendar grid.
     */
    footer?: React.ReactNode;
    /**
     * Initial value for uncontrolled usage
     */
    defaultValue?: Date | Date[] | DateRange;
    /**
     * Minimum selectable date. Dates before this will be disabled.
     * If you want to disable past dates, you can also use the `disablePast` boolean prop.
     */
    minDate?: Date;
    /**
     * Maximum selectable date. Dates after this will be disabled.
     * If you want to disable future dates, you can also use the `disableFuture` boolean prop.
     */
    maxDate?: Date;
    /**
     * Disable all past dates. Dates before the current date will be disabled.
     */
    disablePast?: boolean;
    /**
     * Disable all future dates. Dates after the current date will be disabled.
     */
    disableFuture?: boolean;
    /**
     * Disable specific months dynamically. Receives a month `Date` object and should return `true` if that month should be disabled.
     */
    shouldDisableMonth?: (month: Date) => boolean;
    /**
     * Disable specific years dynamically. Receives a year `Date` object and should return `true` if that year should be disabled.
     */
    shouldDisableYear?: (year: Date) => boolean;
    /**
     * When `true`, the input field will be read-only, preventing manual text input. The calendar can still be opened and used for date selection.
     * This is useful when you want to allow date selection only through the calendar picker and not allow users to type in dates manually.
     *
     * @default false
     */
    readOnly?: boolean;
    /**
     * Specify available days. Can be an array of `Date` objects or a function that receives a date and returns `true` if that date is available.
     * This is useful for highlighting specific dates as available while keeping other dates enabled.
     */
    availableDays?: Date[] | ((date: Date) => boolean);
    /**
     * Props to pass down to the underlying TextField (in 'single' mode) or MultiValueField (in 'multiple' mode). This allows for additional customization of the input field, such as adding custom styles, attributes, or event handlers.
     */
    inputProps?: DateTextFieldProps | DateMultiValueFieldProps;
    /**
     * Open the calendar inside a modal instead of a floating popover. Useful
     * on narrow viewports where a popover overlaps the input itself. Mirrors
     * `TimeField`'s `modal` prop.
     *
     * - `true` always opens in a modal
     * - `false` (default) always uses the popover
     * - A breakpoint name (e.g. `'md'`) opens in a modal *below* that breakpoint
     *   and falls back to the popover from that breakpoint up
     *
     * Ignored when `useNativePicker` resolves to `true` (the native picker is
     * already handled by the OS).
     * @default false
     */
    modal?: DateFieldModal;
    /**
     * Extra props forwarded to the calendar modal's `Modal.Content` — e.g. `size`, `width`, `maxWidth`,
     * `position`, `fullscreen`, and per-breakpoint overrides. Lets the consumer tune the modal beyond
     * its responsive-width defaults. `className` is merged with the component's own (so the internal
     * layout is preserved). Only applies when the calendar opens as a modal.
     */
    modalProps?: Omit<ModalContentProps, 'children'>;
    /**
     * Heading shown at the top of the calendar modal. Falls back to the `date-field.modal-title`
     * label. Handy for month/year-only pickers (e.g. `"Vali kuu"` / `"Vali aasta"`). Only applies when
     * the calendar opens as a modal.
     */
    modalTitle?: string;
    /**
     * Error message rendered below the input when the user types a date that
     * matches one of the disable matchers (`disablePast`, `disableFuture`,
     * `minDate`, `maxDate`, `disabledMatchers`, or the deprecated `disabled`
     * overload). Falls back to the localised `dateField.disabledDateError`
     * label.
     */
    disabledDateErrorMessage?: string;
}
export declare const DateField: React.ForwardRefExoticComponent<DateFieldProps & React.RefAttributes<TextFieldForwardRef>>;
export {};