import clsx from 'clsx'
import { Col } from './layout/col'
import { Spacer } from './layout/spacer'

export function ProbabilityInput(props: {
  prob: number | undefined
  onChange: (newProb: number | undefined) => void
  error: string | undefined
  setError: (error: string | undefined) => void
  disabled?: boolean
  className?: string
  inputClassName?: string
}) {
  const { prob, onChange, error, disabled, className, inputClassName } = props

  const onProbChange = (str: string) => {
    let prob = parseInt(str.replace(/\D/g, ''))
    const isInvalid = !str || isNaN(prob)
    if (prob.toString().length > 2) prob = +prob.toString().slice(0, 2)
    onChange(isInvalid ? undefined : prob)
  }

  return (
    <Col className={className}>
      <label className="input-group">
        <input
          className={clsx(
            'input input-bordered max-w-[200px] text-lg',
            error && 'input-error',
            inputClassName
          )}
          type="number"
          max={100}
          min={0}
          pattern="[0-9]*"
          inputMode="numeric"
          placeholder="0"
          maxLength={2}
          value={prob ?? ''}
          disabled={disabled}
          onChange={(e) => onProbChange(e.target.value)}
        />
        <span className="bg-gray-200 text-sm">%</span>
      </label>

      <Spacer h={4} />

      {error && (
        <div className="mb-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide text-red-500">
          {error}
        </div>
      )}
    </Col>
  )
}