import { useCallback, useMemo } from 'react'

import { Input } from './Input'

import type { ChangeEventHandler, FC, KeyboardEventHandler } from 'react'

interface Props {
  className?: string
  error?: boolean
  value?: string
  balance?: string
  placeholder?: string
  onChange?: (formValue?: string) => void
  disabled?: boolean
  min?: string
  max?: string
  step?: string
  decimals?: number
}

const trimInput = (value?: string, decimals?: number): string => {
  if (!value) return ''
  if (!decimals) return value

  const split = value?.split('.')
  if (split.length > 1) {
    if (split[1].length >= decimals) {
      return [split[0], split[1].substr(0, decimals)].join('.')
    }
  }
  return value
}

export const AmountInput: FC<Props> = ({
  className,
  error,
  disabled = false,
  placeholder = '0.0',
  onChange,
  value,
  min = '0',
  max,
  step = '0.01',
  decimals,
}) => {
  const trimmedValue = useMemo(() => trimInput(value, decimals), [value, decimals])

  const handleKeyPress = useCallback<KeyboardEventHandler<HTMLInputElement>>(event => {
    // Prevent 'minus' key
    if ((event.which || event.keyCode) === 45) {
      event.preventDefault()
      event.stopPropagation()
    }
  }, [])

  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(event => onChange?.(event.target.value ?? undefined), [onChange])

  return (
    <Input
      className={className}
      error={error}
      min={min}
      max={max}
      placeholder={placeholder}
      step={step}
      value={trimmedValue}
      onKeyPress={handleKeyPress}
      onChange={handleChange}
      disabled={disabled}
    />
  )
}