import PropTypes from 'prop-types'
import { Button, Flex, Input, InputNumber } from 'antd'

const ArrayInput = ({
  value = [],
  onChange,
  disabled = false,
  numeric = false,
  min,
  max,
  step,
  placeholder
}) => {
  const values = Array.isArray(value) ? value : []

  const updateValue = (index, nextValue) => {
    const nextValues = [...values]
    nextValues[index] = nextValue
    onChange?.(nextValues)
  }

  const removeValue = (index) => {
    onChange?.(values.filter((_, valueIndex) => valueIndex !== index))
  }

  return (
    <Flex vertical gap='small' style={{ width: '100%' }}>
      {values.map((item, index) => (
        <Flex key={index} gap='small' style={{ width: '100%' }}>
          {numeric ? (
            <InputNumber
              value={item}
              onChange={(nextValue) => updateValue(index, nextValue)}
              min={min}
              max={max}
              step={step}
              placeholder={placeholder}
              disabled={disabled}
              style={{ flex: 1 }}
            />
          ) : (
            <Input
              value={item}
              onChange={(event) => updateValue(index, event.target.value)}
              placeholder={placeholder}
              disabled={disabled}
              style={{ flex: 1 }}
            />
          )}
          <Button
            onClick={() => removeValue(index)}
            disabled={disabled}
            danger
            aria-label={`Remove ${placeholder || 'item'}`}
          >
            Remove
          </Button>
        </Flex>
      ))}
      <Button
        onClick={() => onChange?.([...values, numeric ? null : ''])}
        disabled={disabled}
        type='dashed'
        block
      >
        Add {placeholder || 'item'}
      </Button>
    </Flex>
  )
}

ArrayInput.propTypes = {
  value: PropTypes.array,
  onChange: PropTypes.func,
  disabled: PropTypes.bool,
  numeric: PropTypes.bool,
  min: PropTypes.number,
  max: PropTypes.number,
  step: PropTypes.number,
  placeholder: PropTypes.string
}

export default ArrayInput