/// <reference types="svelte" />
import type { SvelteComponentTyped } from "svelte";

export interface DateRange {
  start: Date | null;
  end: Date | null;
}

export interface DatePickerProps {
  /**
   * @default null
   */
  class?: string | false | null;

  /**
   * A class string to add to the list of weekdays above the calendar.
   * @default null
   */
  weekdaysClass?: string | false | null;

  /**
   * A class string to add to each element containing a row of days in the calendar.
   * @default null
   */
  weekClass?: string | false | null;

  /**
   * A class string to add to each day in the calendar.
   * @default null
   */
  dayClass?: string | false | null;

  /**
   * A class string to pass down to the `TextField`(s).
   * @default null
   */
  inputClass?: string | false | null;

  /**
   * If this is set to `true`, the date picker will have two fields – for the start and the end of the date range.
   * @default false
   */
  range?: boolean;

  /**
   * The language tag defining the desired locale (e.g., `en-US`). If left `undefined`, the user's locale will be used.
   * This will affect the weekdays and the day number representations.
   * @default undefined
   */
  locale?: string | undefined;

  /**
   * The index of the weekday to start the week at.
   * 0 is for Sunday and 6 is for Saturday.
   * Defaults to 1 (Monday).
   * @default 1
   */
  firstWeekday?: 0 | 1 | 2 | 3 | 4 | 5 | 6;

  /**
   * Whether to hide the calendar dropdown and only keep the text input.
   * @default false
   */
  noCalendar?: boolean;

  /**
   * Whether to show the calendar dropdown above or below the text field.
   * @default false
   */
  top?: boolean;

  /**
   * Whether to align the calendar dropdown to the right or the left side of the text field.
   * @default false
   */
  right?: boolean;

  /**
   * Depending on the value of the range prop, this is either a `Date` object or an object with two fields, `start` and `end`, containing Date objects.
   * @default null
   */
  value?: Date | DateRange | null;

  /**
   * A set of dates to disable.
   * @default []
   */
  disabledDates?: Array<Date | { start?: Date; end?: Date }>;

  /**
   * If `true`, the dropdown will be automatically closed after a date is selected.
   * @default false
   */
  closeOnSelection?: boolean;

  /**
   * The format string for the text input and representation. The `%`-specifiers are a subset of [C date format specifiers](http://www.cplusplus.com/reference/ctime/strftime/), with only `%d`, `%m`, `%y` and `%Y` allowed.
   * @default '%d.%m.%Y'
   */
  format?: string;
}

export default class DatePicker extends SvelteComponentTyped<
  DatePickerProps,
  { change: CustomEvent<{ value: Date | DateRange }> },
  { ["between-inputs"]: {}; ["chevron-left"]: {}; ["chevron-right"]: {} }
> {}