import * as React from 'react';
import { InputProps } from '../Input';
import { PopoverCommonProps } from '../common';
import { SupportedWixLocales } from '@wix/design-systems-locale-utils';

export type TimeInputProps = {
  /** Specifies a CSS class name to be appended to the component's root element.
   * @internal
   */
  className?: string;
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
  /** Specifies whether component is disabled. */
  disabled?: InputProps['disabled'];
  /** Control the border style of input. */
  border?: InputProps['border'];
  /** Sets the background color of the input. Accepts any CSS color value. */
  backgroundColor?: InputProps['backgroundColor'];
  /** Defines a callback function which is called on every time value changes. */
  onChange?({ date }: { date: Date | null }): void;
  /** Defines a callback function which is called on cases when invalid time is typed or confirmed with an action.
   * - return {{ validationType: 'formatError' | 'outOfBoundsError', value: string }}
   * - `validationType` - type 'formatError'is set when value is in the wrong time format
   *                    - type 'outOfBoundsError' is set when `excludePastTimes` or `filterTime` is used and value doesn't match the filters
   * - `value` - is set to current input value
   */
  onInvalid?(info: {
    validationType: 'formatError' | 'outOfBoundsError';
    value: string;
  }): void;
  /** Sets a placeholder message to display. */
  placeholder?: InputProps['placeholder'];
  /** Pass a component you want to show as the prefix of the input, e.g., text, icon. */
  prefix?: InputProps['prefix'];
  /** Specifies whether input is read only. */
  readOnly?: InputProps['readOnly'];
  /** Controls the size of the input. */
  size?: InputProps['size'];
  /** Specify the status of a field. */
  status?: InputProps['status'];
  /** Defines the message to display on status icon hover. If not given or empty, no tooltip is displayed. */
  statusMessage?: InputProps['statusMessage'];
  /** Enables internal validation and defines a message to display when user types invalid time value. */
  invalidMessage?: string;
  /** Specifies the interval between time values shown in dropdown.
   * @default 15
   */
  step?: number;
  /** Pass a component you want to show as the suffix of the input, e.g., text, icon. */
  suffix?: InputProps['suffix'];
  /** Sets locale and formats time according to it. */
  locale?: SupportedWixLocales;
  /** Specifies what time formatting style to use when calling `format()` */
  timeStyle?: 'long' | 'short';
  /** Specifies the current value of the input. */
  value?: Date | null;
  /** Controls the width of the component. `auto` resizes the input to match the width of its contents, while `100%` takes up the full parent container width. */
  width?: React.CSSProperties['width'];
  /**
   * Allows to pass all common popover props.
   * @linkTypeTo Popover
   */
  popoverProps?: PopoverCommonProps;
  /** Defines a standard input `onFocus` callback. */
  onFocus?: InputProps['onFocus'];
  /** Defines a standard input `onBlur` callback. */
  onBlur?: InputProps['onBlur'];
  /** Specifies whether input is auto selected on focus. */
  autoSelect?: InputProps['autoSelect'];
  /**
   * Sets the native `inputmode` attribute, which picks the virtual keyboard on touch devices.
   * Supported values are `none`, `text`, `decimal`, `numeric`, `tel`, `search`, `email` and `url`.
   */
  inputmode?: InputProps['inputmode'];
  /** Sets the label of the virtual keyboard's enter key on touch devices. */
  enterKeyHint?: InputProps['enterKeyHint'];
  /** Specify whether past time slots should be shown or not. */
  excludePastTimes?: boolean;
  /**
   * Specify selectable time slots:
   *  * `param` {Date} `value` - a time to check
   *  * `return` {boolean} - true if `value` should be shown in time slots dropdown, false otherwise
   */
  filterTime?: (time: Date) => boolean;
  /** Specifies whether typing into the field is blocked, leaving the stepper controls as the only way to change the time. */
  disableKeyboardType?: boolean;
  /**
   * Disables the auto-suggest UX (closest-time pre-fill, suggestion autofill,
   * mid-typing format validation). The dropdown still works as a picker.
   * Use when integrating an external input mask. Format errors surface on blur.
   */
  disableAutoComplete?: boolean;
  /** Specifies whether status suffix is hidden. */
  hideStatusSuffix?: boolean;
  /**
   * Ref to the underlying `<input>` DOM element. Accepts callback and object refs.
   * Use for input masking libraries. Memoize callback refs to avoid reattaching.
   */
  inputRef?: React.Ref<HTMLInputElement>;
  /**
   * Render a custom component in place of the default `<input>`.
   * Must be a `React.forwardRef` component that forwards the ref to a real `<input>`.
   */
  customInput?: InputProps['customInput'];
};

export type TimeInputImperativeActions = {
  focus(): void;
  blur(): void;
  clear(): void;
};

declare const TimeInput: React.ForwardRefExoticComponent<
  TimeInputProps & React.RefAttributes<TimeInputImperativeActions>
>;

export { TimeInput };