import React from "react";

type CustomComponent<T> = React.FC<T>;
type NumericTextBoxInputType = "tel" | "text";

type NumberFormatOptions = {
  currency?: string;
  currencyDisplay?: "symbol" | "code" | "name";
  maximumFractionDigits?: number;
  minimumFractionDigits?: number;
  minimumIntegerDigits?: number;
  style?: "percent" | "decimal" | "currency" | "scientific" | "accounting";
  useGrouping?: boolean;
};

type NumericTextBoxEvent = {
  nativeEvent: any;
  syntheticEvent: React.SyntheticEvent<any>;
  target: NumericTextBoxHandle;
};

export interface NumericTextBoxChangeEvent {
  nativeEvent: any;
  syntheticEvent: React.SyntheticEvent<any>;
  target: NumericTextBoxHandle;
  value: null | number;
}

export interface NumericTextBoxBlurEvent {
  nativeEvent: any;
  syntheticEvent: React.SyntheticEvent<any>;
  target: NumericTextBoxHandle;
}

export interface NumericTextBoxFocusEvent {
  nativeEvent: any;
  syntheticEvent: React.SyntheticEvent<any>;
  target: NumericTextBoxHandle;
}

export interface NumericTextBoxHandle {
  element: null | HTMLInputElement;
  name?: string;
  validity: FormComponentValidity;
  value: null | number;
}

export interface FormComponentValidity {
  badInput?: boolean;
  customError: boolean;
  patternMismatch?: boolean;
  rangeOverflow?: boolean;
  rangeUnderflow?: boolean;
  stepMismatch?: boolean;
  tooLong?: boolean;
  tooShort?: boolean;
  typeMismatch?: boolean;
  valid: boolean;
  valueMissing: boolean;
}

export interface NumericTextBoxProps {
  dataTestId?: string;
  accessKey?: string;
  ariaDescribedBy?: string;
  ariaLabel?: string;
  ariaLabelledBy?: string;
  className?: string;
  defaultValue?: null | number;
  dir?: string;
  disabled?: boolean;
  fillMode?: null | "flat" | "outline" | "solid";
  format?: string | NumberFormatOptions;
  id?: string;
  inputStyle?: React.CSSProperties;
  inputType?: NumericTextBoxInputType;
  label?: string;
  max?: number;
  min?: number;
  name?: string;
  placeholder?: string;
  prefix?: CustomComponent<any>;
  rangeOnEnter?: boolean;
  readOnly?: boolean;
  required?: boolean;
  rounded?: null | "small" | "medium" | "full" | "large";
  size?: null | "small" | "medium" | "large";
  spinners?: boolean;
  step?: number;
  style?: React.CSSProperties;
  suffix?: CustomComponent<any>;
  tabIndex?: number;
  title?: string;
  valid?: boolean;
  validationMessage?: string;
  validityStyles?: boolean;
  value?: null | number;
  width?: string | number;
  onBlur?: (event: NumericTextBoxEvent) => void;
  onChange?: (event: NumericTextBoxChangeEvent) => void;
  onFocus?: (event: NumericTextBoxEvent) => void;
}