import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames/bind';
import NumericInput from 'react-numeric-input';
import styles from './numberinput.scss';
import Typography from '../Typography';

const NumberInput = ({
  defaultValue,
  max,
  min,
  step,
  onChange,
  label,
  precision,
  disabled,
  format,
}) => {
  const cx = classnames.bind(styles);

  const { Text } = Typography;

  return (
    <div>
      {label && (
        <Text push bold>
          {label}
        </Text>
      )}

      <NumericInput
        size={3}
        max={max}
        min={min}
        step={step}
        precision={precision}
        format={format}
        className={cx('numberinput')}
        disabled={disabled}
        mobile
        defaultValue={defaultValue}
        onChange={onChange}
      />

      <style jsx>{`
        b {
          border: none !important;
          background: none !important;
          box-shadow: none !important;

          cursor: pointer !important;
        }
      `}</style>
    </div>
  );
};

NumberInput.defaultProps = {
  defaultValue: 0,
  max: undefined,
  min: 0,
  step: undefined,
  onChange: undefined,
  label: undefined,
  precision: undefined,
  disabled: false,
  format: undefined,
};

NumberInput.propTypes = {
  defaultValue: PropTypes.number,
  max: PropTypes.number,
  min: PropTypes.number,
  step: PropTypes.number,
  onChange: PropTypes.func,
  label: PropTypes.string,
  precision: PropTypes.number,
  disabled: PropTypes.bool,
  format: PropTypes.func,
};

export default NumberInput;