import { Slot } from 'vue';

import { CustomValidation } from '../form';
import { ClassComponent } from '../ts-helpers.d';

export { CalendarLocaleConfig, CalendarPresetOptions } from '../calendar';

/**
 * Calendar component props
 */
export interface CalendarProps {
  /**
   * Calendar modelValue is date timestamp: 1706423635731
   */
  modelValue?: number | number[];
  /**
   * To display the initial date value, used in edit form, taht sometime need to display the already inputed date.
   */
  dateValue?: number | number[];

  /**
   * Display label on top of Date Input.
   */
  label?: string;

  /**
   * The input placeholder
   * @default - The value on locale config {@link CalendarLocaleConfig.defaultPlaceholder}
   */
  placeholder?: string;
  disabled?: boolean;

  /**
   * Make the calendar states readonly.
   * If true, calendar will not allow user interaction with it. But user can view currently selected date and time.
   *
   * @default false
   */
  readonly?: boolean;

  /**
   * The class name of the overlay element.
   */
  overlayClass?: string;

  /**
   * Identifier of the underlying input element.
   */
  inputId?: string | undefined;

  /**
   * Identifier of the wrapper element.
   */
  id?: string | undefined;
  /**
   * Whether single date or date range model value.
   *
   * @default 'single'
   */
  mode?: 'range' | 'single' | 'multiple';

  /**
   * Type of view to display.
   * @defaultValue date
   */
  view?: 'date' | 'month' | 'year' | undefined;

  /**
   * Wheter show year picker or not
   *
   * @default true
   */
  showYear?: boolean;

  /**
   * Show button Apply and cancel on footer.
   *
   * If shown, the modelValue will be updated on button Apply clicked.
   *
   * @default false;
   */
  showButtons?: boolean;

  /**
   * Enable Validator using vee-validate. Combine with Form component that handle form validation.
   */
  useValidator?: boolean;

  /**
   * When used as field in From Validation using Form component,
   * specify the unique field name, match with your needs for API request.
   */
  fieldName?: string;

  /**
   * Show information to user about the field.
   */
  fieldInfo?: string;

  /**
   * Whether this field should be filled or not.
   */
  mandatory?: boolean;

  /**
   * Show the text (opsional)
   *
   * @default true if mandatory true
   */
  showOptionalText?: boolean;

  /**
   * Sets the invalid state.
   */
  invalid?: boolean;
  /**
   * Set the custom validator message.
   * By default each field has preserved with its validator message, you don't need to worrying about the message.
   */
  validatorMessage?: string;
  /**
   * Set custom validation message for certain condition
   */
  customValidation?: CustomValidation<'empty'>;

  /**
   * Format of the date. Defaults to PrimeVue Locale configuration.
   */
  dateFormat?: string | undefined;

  /**
   * Specifies hour format.
   * @defaultValue 24
   */
  hourFormat?: '12' | '24' | undefined;

  /**
   * Defines the calendar to use hour picker.
   */
  showTime?: boolean;

  /**
   * Separator of time selector.
   * @defaultValue :
   */
  timeSeparator?: string | undefined;

  /**
   * Hours to change per step.
   * @defaultValue 1
   */
  stepHour?: number | undefined;

  /**
   * Minutes to change per step.
   * @defaultValue 1
   */
  stepMinute?: number | undefined;

  /**
   * Formats the hour picker to 12 hour format.
   * @default true
   *
   * @deprecated use {@link hourFormat}
   */
  useTimeFormat?: boolean;

  /**
   * Only allow weekdays to be selected.
   */
  onlyWeekdays?: boolean;

  /**
   * Exclude certain dates from selection.
   */
  excludeDates?: Date[];

  /**
   * The minimum selectable date.
   */
  minDate?: Date | undefined;

  /**
   * The maximum selectable date.
   */
  maxDate?: Date | undefined;

  /**
   * The maximum selectable year.
   *
   * The full year: 2020
   * @todo Support number, currently only support 'current'
   */
  maxYear?: 'current' | number | undefined;

  /**
   * The maximum selectable months.
   *
   * Number 0-11
   *
   * @todo Support number, currently only support 'current'
   */
  maxMonth?: 'current' | number | undefined;
  /**
   * When using range selection mode, selecting only the "start date" (without an "end date") will, by default, return a range ending 24 hours later.
   * Enabling this prop will instead return the exact dates selected, without adding an extra day.
   *
   * @example Selecting dates from the 1st to the 5th will return an array of epoch timestamps for each day: [1st, 2nd, 3rd, 4th, 5th].
   * @default false
   * @requires selectionMode = 'range'
   */
  exactSelection?: boolean;
}

/**
 * Calendar component emits
 */
export type CalendarEmits = {
  'update:modelValue': [date?: number | number[]];
};

export interface CalendarSlots {
  /**
   * Slot for custom root input element
   */
  'default': Slot<{ onClick: (event: Event) => void }>;

  /**
   * Slot for additional content in overlay
   */
  'addon-overlay': Slot;
}

/**
 * **WangsVue - Calendar**
 *
 * _Handle input date with form validation._
 *
 * --- ---
 * ![WangsVue](https://www.wangsit.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
 *
 * @group form
 */
declare class Calendar extends ClassComponent<
  CalendarProps,
  CalendarSlots,
  CalendarEmits
> {}

export default Calendar;