import React from 'react';

/**
 * Props interface for the InputNumeric component
 * 
 * InputNumeric is a specialized input component for handling numeric values with
 * support for currency formatting, decimal places, step increments, and validation.
 * It provides enhanced user experience for numeric data entry with proper formatting.
 */
export interface InputNumericProps {
  /**
   * Unique identifier for the input element
   * Used for accessibility, form handling, and testing
   * 
   * @example "price-input"
   */
  id?: string;

  /**
   * Text label displayed above the input field
   * Provides context about what the numeric input represents
   * 
   * @example "Product Price"
   */
  label?: string;

  /**
   * The type of numeric input to render
   * Determines formatting and validation behavior
   * 
   * @example "currency" - For monetary values with currency formatting
   * @example "number" - For general numeric values
   */
  type: "currency" | "number";

  /**
   * Helper text displayed below the input
   * Provides additional context, instructions, or validation messages
   * 
   * @example "Enter price in USD without currency symbol"
   */
  assistiveText?: string;

  /**
   * Placeholder text shown when the input is empty
   * Provides a hint about the expected numeric format
   * 
   * @example "0.00"
   */
  placeholder?: string;

  /**
   * Text for an optional button inside the input
   * When provided, renders a clickable button within the input field
   * 
   * @example "Calculate"
   */
  buttonText?: string;

  /**
   * Whether the input is disabled and non-interactive
   * When true, the input cannot be focused or modified
   * 
   * @default false
   */
  isDisabled?: boolean;

  /**
   * Icon name to display within the input field
   * Uses the Icons component to render the specified icon
   * 
   * @example "calculator"
   */
  icon?: string;

  /**
   * The current numeric value of the input field
   * Can be a number or string depending on formatting
   * 
   * @example 1234.56
   */
  value?: any;

  /**
   * Tooltip text displayed on hover over the info icon
   * Provides additional help or context for the input
   * 
   * @example "Enter the total amount including tax"
   */
  tooltip?: string;

  /**
   * Whether the input should only accept integer values
   * When true, decimal places are not allowed
   * 
   * @default false
   */
  isInteger?: boolean;

  /**
   * Increment/decrement step value for the input
   * Used when using arrow keys or spinner buttons
   * 
   * @example 0.01 - For currency with cents
   * @example 1 - For whole numbers
   */
  step?: number;

  /**
   * Number of decimal places to display and allow
   * Controls precision of the numeric value
   * 
   * @example 2 - For currency (e.g., 123.45)
   * @example 0 - For integers only
   */
  decimalPlaces?: number;

  /**
   * Custom CSS styles to apply to the input container
   * Overrides default styling for layout and appearance
   * 
   * @example { width: '150px', textAlign: 'right' }
   */
  style?: React.CSSProperties;

  /**
   * Additional CSS class names to apply to the component
   * Allows for custom styling through CSS classes
   * 
   * @example "currency-input numeric-field"
   */
  className?: string;

  /**
   * Position of the icon relative to the input text
   * Determines whether icon appears before or after the input value
   * 
   * @default "right"
   */
  iconPosition?: "left" | "right";

  /**
   * Whether the component is in a loading state
   * When true, the input may show loading indicators or be disabled
   * 
   * @default false
   */
  loading?: boolean;

  /**
   * Minimum allowed value for the input
   * Prevents users from entering values below this threshold
   * 
   * @example 0 - Prevents negative values
   */
  min?: number;

  /**
   * Maximum allowed value for the input
   * Prevents users from entering values above this threshold
   * 
   * @example 1000000 - Maximum price limit
   */
  max?: number;

  /**
   * Maximum number of characters allowed in the input
   * Includes formatting characters like commas and decimal points
   * 
   * @example 10 - Limits total character count
   */
  maxLength?: number;

  /**
   * Callback function triggered when the input value changes
   * Receives the new value as parameter (may be formatted string or number)
   * 
   * @param value - The new value entered by the user
   * @example (value) => setPrice(parseFloat(value))
   */
  onChange?: (value: any) => void;

  /**
   * Callback function triggered when the button inside input is clicked
   * Only active when buttonText is provided
   * 
   * @example () => calculateTotal()
   */
  onClick?: () => void;

  /**
   * Marks the input as required. When true, and on form submit attempt, if empty it will show invalid state.
   */
  isRequiere?: boolean;
}
