import {
  EventHandler,
  UIEventHandler,
  ReactEventHandler,
  KeyboardEventHandler,
  ClipboardEvent,
  FormEventHandler,
  FormEvent,
} from 'react'

/**
 * @api https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
 */
export type AutoCompleteType =
  /**
   * The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method. The browser does not automatically complete the entry.
   */
  | 'off'
  /**
   * The browser is allowed to automatically complete the value based on values that the user has entered during previous uses, however on does not provide any further information about what kind of data the user might be expected to enter.
   */
  | 'on'

  /**
   *  Full name.
   */
  | 'name'

  /**
   * Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle").
   */
  | 'honorific-prefix'

  /**
   * First name.
   */
  | 'given-name'

  /**
   * Middle name.
   */
  | 'additional-name'

  /**
   * Last name.
   */
  | 'family-name'

  /**
   * Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II").
   */
  | 'honorific-suffix'
  | 'nickname'
  | 'email'
  | 'username'

  /**
   * A new password (e.g. when creating an account or changing a password).
   */
  | 'new-password'
  | 'current-password'
  /**
   * Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director").
   */
  | 'organization-title'
  | 'organization'
  | 'street-address'
  | 'address-line1'
  | 'address-line2'
  | 'address-line3'
  | 'address-level4'
  | 'address-level3'
  | 'address-level2'
  | 'address-level1'
  | 'country'
  | 'country-name'
  | 'postal-code'
  /**
   * Full name as given on the payment instrument.
   */
  | 'cc-name'
  | 'cc-given-name'
  | 'cc-additional-name'
  | 'cc-family-name'
  /**
   * Code identifying the payment instrument (e.g. the credit card number).
   */
  | 'cc-number'
  /**
   * Expiration date of the payment instrument.
   */
  | 'cc-exp'
  | 'cc-exp-month'
  | 'cc-exp-year'
  /**
   * Security code for the payment instrument.
   */
  | 'cc-csc'
  /**
   * Type of payment instrument (e.g. Visa).
   */
  | 'cc-type'
  | 'transaction-currency'
  | 'transaction-amount'
  /**
   * Preferred language; a valid BCP 47 language tag.
   */
  | 'language'
  /**
   * birthday
   */
  | 'bday'
  | 'bday-day'
  | 'bday-month'
  | 'bday-year'
  /**
   * Gender identity (e.g. Female, Fa'afafine), free-form text, no newlines.
   */
  | 'sex'
  /**
   * full telephone number, including country code
   */
  | 'tel'
  /**
   * additional tel variants
   */
  | 'tel-country-code'
  | 'tel-national'
  | 'tel-area-code'
  | 'tel-local'
  | 'tel-local-prefix'
  | 'tel-local-suffix'
  | 'tel-extension'

  /**
   * Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field.
   */
  | 'url'
  /**
   * Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field.
   */
  | 'photo'

export type InputType =
  | 'color'
  //
  | 'email'
  | 'number'
  | 'range'
  | 'search'
  | 'tel'
  | 'url'
  //
  | 'datetime-local'
  | 'month'
  | 'week'
  //
  | 'date'
  | 'time'
  | 'datetime'

/**
 * Returns the value of the data at the cursor's current position.
 */
export type InputValue = string | boolean | number

export interface HTMLInputElementReact extends HTMLInputElement {
  // === most common ===

  /**
   * end result value
   */
  value: InputValue

  /**
   * Returns the content type of the object.
   */
  type: string

  /**
   * Gets or sets a text string that is displayed in an input field as a hint or prompt to users as the format or type of information they need to enter.The text appears in an input field until the user puts focus on the field.
   */
  placeholder: string
  /**
   * Sets or retrieves the name of the object.
   */
  name: string

  // === built-in functionality ===

  /**
   * Specifies whether autocomplete is applied to an editable text field.
   */
  autocomplete: AutoCompleteType
  /**
   * Provides a way to direct a user to a specific field when a document loads. This can provide both direction and convenience for a user, reducing the need to click or tab to a field when a page opens. This attribute is true when present on an element, and false when missing.
   */
  autofocus: boolean

  // === specific types of checkboxes and the values ===

  /**
   * Sets or retrieves the state of the check box or radio button.
   */
  checked: boolean
  /**
   * Sets or retrieves the state of the check box or radio button.
   */
  defaultChecked: boolean
  /**
   * Sets or retrieves the initial contents of the object.
   */
  defaultValue: string

  // === states that aren't validation ===

  /**
   * When present, marks an element that can't be submitted without a value.
   */
  required: boolean
  /**
   * Whether the input can be interacted with.
   */
  disabled: boolean
  /**
   * Whether the value can be changed or not .
   */
  readOnly: boolean

  // === validation ===

  /**
   * Defines the maximum acceptable value for an input element with type="number".When used with the min and step attributes, lets you control the range and increment (such as only even numbers) that the user can enter into an input field.
   */
  max: string
  /**
   * Sets or retrieves the maximum number of characters that the user can enter in a text control.
   */
  maxLength: number
  /**
   * Defines the minimum acceptable value for an input element with type="number". When used with the max and step attributes, lets you control the range and increment (such as even numbers only) that the user can enter into an input field.
   */
  min: string
  /**
   * Gets or sets a string containing a regular expression that the user's input must match.
   */
  pattern: string

  /**
   * Returns the error message that would be displayed if the user submits the form, or an empty string if no error message. It also triggers the standard error message, such as "this is a required field". The result is that the user sees validation messages without actually submitting.
   */
  readonly validationMessage: string
  /**
   * Returns a  ValidityState object that represents the validity states of an element.
   */
  readonly validity: ValidityState
  /**
   * Returns whether an element will successfully validate based on forms validation rules and constraints.
   */
  readonly willValidate: boolean
  minLength: number
  /**
   * Returns whether a form will validate when it is submitted, without having to submit it.
   */
  checkValidity(): boolean
  /**
   * Sets a custom error message that is displayed when a form is submitted.
   * @param error Sets a custom error message that is displayed when a form is submitted.
   */
  setCustomValidity(error: string): void

  // === see value from first prop ===

  /**
   * Returns the input field value as a date
   */
  valueAsDate: Date
  /**
   * Returns the input field value as a number.
   */
  valueAsNumber: number

  /**
   * Makes the selection equal to the current object.
   */
  select(): void

  // === events & step ===

  /**
   * Defines an increment or jump between values that you want to allow the user to enter. When used with the max and min attributes, lets you control the range and increment (for example, allow only even numbers) that the user can enter into an input field.
   */
  step: string
  /**
   * Sets the start and end positions of a selection in a text field.
   * @param start The offset into the text field for the start of the selection.
   * @param end The offset into the text field for the end of the selection.
   */
  setSelectionRange(start?: number, end?: number, direction?: string): void
  /**
   * Decrements a range input control's value by the value given by the Step attribute. If the optional parameter is used, it will decrement the input control's step value multiplied by the parameter's value.
   * @param n Value to decrement the value by.
   */
  stepDown(n?: number): void
  /**
   * Increments a range input control's value by the value given by the Step attribute. If the optional parameter is used, will increment the input control's value by that value.
   * @param n Value to increment the value by.
   */
  stepUp(n?: number): void
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLInputElement, ev: HTMLElementEventMap[K]) => any,
    useCapture?: boolean
  ): void
  addEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    useCapture?: boolean
  ): void
  removeEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLInputElement, ev: HTMLElementEventMap[K]) => any,
    useCapture?: boolean
  ): void
  removeEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    useCapture?: boolean
  ): void

  // === uncommon ===

  /**
   * Sets or retrieves the Boolean value indicating whether multiple items can be selected from a list.
   */
  multiple: boolean

  /**
   * Sets or retrieves a comma-separated list of content types.
   */
  accept: string
  /**
   * Sets or retrieves how the object is aligned with adjacent text.
   */
  align: string
  /**
   * Sets or retrieves a text alternative to the graphic.
   */
  alt: string
  /**
   * Sets or retrieves the width of the border to draw around the object.
   */
  border: string
  /**
   * Retrieves whether the object is fully loaded.
   */
  readonly complete: boolean
  /**
   * Returns a FileList object on a file type input object.
   */
  readonly files: FileList | null
  /**
   * Retrieves a reference to the form that the object is embedded in.
   */
  readonly form: HTMLFormElement | null
  /**
   * Overrides the action attribute (where the data on a form is sent) on the parent form element.
   */
  formAction: string
  /**
   * Used to override the encoding (formEnctype attribute) specified on the form element.
   */
  formEnctype: string
  /**
   * Overrides the submit method attribute previously specified on a form element.
   */
  formMethod: string
  /**
   * Overrides any validation or required attributes on a form or form elements to allow it to be submitted without validation. This can be used to create a "save draft"-type submit option.
   */
  formNoValidate: string
  /**
   * Overrides the target attribute on a form element.
   */
  formTarget: string
  /**
   * Sets or retrieves the height of the object.
   */
  height: string
  /**
   * Sets or retrieves the width of the object.
   */
  width: string
  /**
   * Sets or retrieves the width of the border to draw around the object.
   */
  hspace: number
  indeterminate: boolean
  /**
   * Specifies the ID of a pre-defined datalist of options for an input element.
   */
  readonly list: HTMLElement
  selectionDirection: string
  /**
   * Gets or sets the end position or offset of a text selection.
   */
  selectionEnd: number
  /**
   * Gets or sets the starting position or offset of a text selection.
   */
  selectionStart: number
  size: number
  /**
   * The address or URL of the a media resource that is to be considered.
   */
  src: string
  status: boolean
  /**
   * Sets or retrieves the vertical margin for the object.
   */
  vspace: number
  webkitdirectory: boolean
  /**
   * Sets or retrieves the URL, often with a bookmark extension (#name), to use as a client-side image map.
   */
  useMap: string
}