import React from 'react';

import { NumberInput as CoreNumberInput } from '@shoptet/ui-core-web';

import { NumberInputDecrementButton } from './NumberInputDecrementButton';
import { NumberInputIncrementButton } from './NumberInputIncrementButton';
import { NumberInputInput } from './NumberInputInput';
import type { NumberInputProps } from './types';

export type {
  NumberInputProps,
  NumberInputInputProps,
  NumberInputIncrementButtonProps,
  NumberInputDecrementButtonProps,
} from './types';

function toNumber(value: number | string | undefined): number | undefined {
  const parsedNumber = parseFloat(value?.toString() ?? '');
  return value === undefined || isNaN(parsedNumber) ? undefined : parsedNumber;
}

/**
 * A locale-aware number input.
 *
 * Standalone it renders a single styled field: `<NumberInput label='Age' />`.
 *
 * To build a stepper, provide children and compose the sub-components — each auto-wires to the
 * value through context (see `CounterInput`):
 *
 * ```tsx
 * <NumberInput value={value} min={0} max={10} onChange={setValue}>
 *   <NumberInput.DecrementButton />
 *   <NumberInput.Input label='Quantity' />
 *   <NumberInput.IncrementButton />
 * </NumberInput>
 * ```
 */
export const NumberInput = Object.assign(
  ({
    value,
    defaultValue,
    min,
    max,
    step,
    disabled,
    onChange,
    onBlur,
    onFocus,
    children,
    ref,
    ...fieldProps
  }: NumberInputProps) => (
    <CoreNumberInput
      value={value}
      defaultValue={defaultValue}
      min={toNumber(min)}
      max={toNumber(max)}
      step={step}
      disabled={disabled}
      onChange={onChange}
      onBlur={onBlur}
      onFocus={onFocus}
      unwrapped
    >
      {typeof children === 'function' ? children : () => children ?? <NumberInputInput {...fieldProps} ref={ref} />}
    </CoreNumberInput>
  ),
  {
    displayName: 'NumberInput',
    Input: NumberInputInput,
    IncrementButton: NumberInputIncrementButton,
    DecrementButton: NumberInputDecrementButton,
  }
);