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

export interface CalendarLocaleConfig {
  defaultPlaceholder: string;

  /**
   * Error message displayed when no selection has been made.
   *
   * This message can include placeholders:
   * - `{label}`: Replaced with the value of `props.label`.
   * - `{formattedLabel}`: Replaced with the value of `props.label` formatted with an appropriate article (a/an).
   *
   * @example
   * // If `props.label` is 'Date', the error message will be:
   * '{label} must be picked' - 'Date must be picked'
   *
   * @example
   * // If `props.label` is 'Audit Date', the error message will be:
   * 'You must pick {formattedLabel}' - 'You must pick an Audit date'
   */
  emptyInvalidText?: string;

  /**
   * The cancel button when props.showTime or showButton
   *
   * @default 'Cancel'
   */
  cancelFooterButtonLabel?: string;

  /**
   * The apply button when props.showTime or showButton
   *
   * @default 'Apply'
   */
  applyFooterButtonLabel?: string;
}

export type CalendarPresetOptionMethodType = (
  options: Partial<CalendarPresetMethodOptions>,
) => CalendarPresetAttributes;

/**
 * Defines the possible transition types for Calendar.
 */
export type CalendarPresetTransitionType =
  | {
      transition?: TransitionProps;
    }
  | ((options: CalendarPresetMethodOptions) => TransitionProps)
  | undefined;

/**
 * Options passed to methods for pass-through properties.
 */
export interface CalendarPresetMethodOptions {
  instance: any;
  props: CalendarProps;
  state: CalendarState;
  context: Partial<CalendarContext>;
  attrs: any;
  parent: any;
  global: object | undefined;
}

/**
 * Attributes for Calendar pass-through customization.
 */
export interface CalendarPresetAttributes {
  class?: any;
  style?: any;
  [key: string]: any;
}

/**
 * Defines the structure for Calendar pass-through class options.
 * Used in preset.
 */
export interface CalendarPresetOptions {
  root?: CalendarPresetOptionMethodType;
  input?: CalendarPresetOptionMethodType;
  inputicon?: CalendarPresetAttributes;
  dropdownbutton?: {
    root?: CalendarPresetAttributes;
  };
  panel?: CalendarPresetOptionMethodType;
  datepickerMask?: CalendarPresetAttributes;
  header?: CalendarPresetOptionMethodType;
  previousbutton?: CalendarPresetOptionMethodType;
  title?: CalendarPresetOptionMethodType;
  monthTitle?: CalendarPresetAttributes;
  yearTitle?: CalendarPresetOptionMethodType;
  nextbutton?: CalendarPresetOptionMethodType;
  table?: CalendarPresetAttributes;
  tableheadercell?: CalendarPresetAttributes;
  tablebodyrow?: CalendarPresetAttributes;
  weekheader?: CalendarPresetAttributes;
  weeknumber?: CalendarPresetAttributes;
  weekday?: CalendarPresetAttributes;
  day?: CalendarPresetAttributes;
  weeklabelcontainer?: CalendarPresetOptionMethodType;
  daylabel?: CalendarPresetOptionMethodType;
  monthpicker?: CalendarPresetAttributes;
  month?: CalendarPresetOptionMethodType;
  yearpicker?: CalendarPresetAttributes;
  year?: CalendarPresetOptionMethodType;
  timepicker?: CalendarPresetAttributes;
  separatorcontainer?: CalendarPresetAttributes;
  separator?: CalendarPresetAttributes;
  hourpicker?: CalendarPresetAttributes;
  timepickerlabel?: CalendarPresetAttributes;
  minutepicker?: CalendarPresetAttributes;
  secondPicker?: CalendarPresetAttributes;
  incrementbutton?: CalendarPresetAttributes;
  incrementicon?: CalendarPresetAttributes;
  decrementbutton?: CalendarPresetAttributes;
  decrementicon?: CalendarPresetAttributes;
  container?: CalendarPresetAttributes;
  groupcontainer?: CalendarPresetAttributes;
  group?: CalendarPresetAttributes;
  buttonbar?: CalendarPresetAttributes;
  todaybutton?: {
    root?: CalendarPresetAttributes;
  };
  clearbutton?: {
    root?: CalendarPresetAttributes;
  };
  transition?: {
    enterFromClass?: string;
    enterActiveClass?: string;
    leaveActiveClass?: string;
    leaveToClass?: string;
  };
}

/**
 * Represents the current state of the Calendar component.
 */
export interface CalendarState {
  currentView: CalendarProps['view'];
}

/**
 * Defines current month options.
 */
export interface CalendarMonthOptions {
  /**
   * Month index.
   */
  value: number;

  /**
   * Selectable state of the month.
   */
  selectable: boolean;
}

/**
 * Defines current year options.
 */
export interface CalendarYearOptions {
  /**
   * Year value.
   */
  value: number;

  /**
   * Selectable state of the year.
   */
  selectable: boolean;
}

export interface CalendarDate {
  /**
   * Current date.
   */
  day: number;

  /**
   * Current month state.
   */
  month: number;

  /**
   * Current year state.
   */
  year: number;

  /**
   * Current today state of the calendar's day.
   */
  today: boolean;

  /**
   * Selectable state of the day.
   */
  selectable: boolean;

  /**
   * Wether the day is on other month than currently shown
   */
  otherMonth: boolean;
}

/**
 * Provides contextual information for the Calendar component.
 */
export interface CalendarContext {
  /**
   * Current date.
   */
  date: CalendarDate;

  /**
   * Current today state of the calendar's day.
   * @defaultValue false
   */
  today: boolean;

  /**
   * Current other month state of the calendar's day.
   */
  otherMonth: boolean;

  /**
   * Current selected state of the calendar's day or month or year.
   * @defaultValue false
   */
  selected: boolean;

  /**
   * Current date is the first selected on range selection
   */
  firstSelected: boolean;

  /**
   * Current date is the last selected on range selection
   */
  lastSelected: boolean;

  /**
   * Current disabled state of the calendar's day or month or year.
   * @defaultValue false
   */
  disabled: boolean;

  /**
   * Current month state.
   */
  month: CalendarMonthOptions;

  /**
   * Current month index state.
   */
  monthIndex: number;

  /**
   * Current year state.
   */
  year: CalendarYearOptions;
}

/**
 * Calendar component props
 */
export interface CalendarProps {
  /**
   * Bound value of the component.
   * Supports single or multiple date selection.
   *
   * Used with `v-model`.
   * It should not be used with useValidator. v-model should only be used when the Calendar not used in form
   * @defaultValue null
   */
  modelValue?: Date | Date[] | null;

  /**
   * Initial date value for pre-filling forms.
   * Typically used for editing existing records.
   *
   * Accepts epoch timestamps in milliseconds.
   *
   * It will only watch for changes once.
   */
  dateValue?: number | number[];

  /**
   * Epoch time in milliseconds representing the selected date(s).
   *
   * Can be used with `v-model:epochTimeMillis` for two way binding.
   */
  epochTimeMillis?: number | number[];

  /**
   * Defines the format in which the field value is handled.
   * - `'date'` returns a `Date` object.
   * - `'millis'` returns an epoch timestamp in milliseconds.
   *
   * @default millis
   */
  valueFormat?: 'date' | 'millis';

  /**
   * 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;

  /**
   * 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'
   * @deprecated use selectionMode
   */
  mode?: 'range' | 'single';

  /**
   * Whether single date or date range model value.
   *
   * @default 'single'
   */
  selectionMode?: 'range' | 'single';

  /**
   * Whether to hide the overlay on date selection when showTime is enabled.
   * @defaultValue false
   */
  hideOnDateTimeSelect?: boolean | undefined;

  /**
   * Whether to hide the overlay on date selection is completed when selectionMode is range.
   * @defaultValue true - when showButtons and showTime false
   * @defaultValue false - when showButtons and showTime true
   */
  hideOnRangeSelection?: boolean | undefined;

  /**
   * 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 | CustomValidation<'empty'>;

  /**
   * Set custom validation message for certain condition
   *
   * @deprecated - use validatorMessage {@link validatorMessage}
   */
  customValidation?: CustomValidation;

  /**
   * 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;

  /**
   * 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;
}

/**
 * Custom Calendar month change event.
 * @see {@link CalendarEmits.monthChange}
 */
export interface CalendarMonthChangeEvent {
  /**
   * New month.
   */
  month: number;

  /**
   * New year.
   */
  year: number;
}

/**
 * Custom Calendar year change event.
 * @see {@link CalendarEmits.yearChange}
 */
export interface CalendarYearChangeEvent {
  /**
   * New month.
   */
  month: number;

  /**
   * New year.
   */
  year: number;
}

/**
 * Calendar component emits
 */
export type CalendarEmits = {
  'update:modelValue': [
    date: Date | Array<Date> | Array<Date | null> | undefined | null,
  ];
  'update:epochTimeMillis': [millis?: number | number[]];
  'monthChange': [event: CalendarMonthChangeEvent];
  'yearChange': [event: CalendarYearChangeEvent];
  'dateSelect': [date: Date | Date[]];
};

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

export default Calendar;