import React, { ChangeEvent, useRef } from 'react';

export interface ICounter {
  className?: string;
  disabled?: boolean;
  id?: string;
  label?: string;
  name?: string;
  max?: string | number;
  min?: string | number;
  style?: React.CSSProperties;
  placeholder?: string;
  value: any;
  setValue(param: any): void;
  [x: string]: any;
}

export const Counter: React.FC<ICounter> = (props) => {
  const { className = '', disabled, id, label, name, min = 0, max = 100, placeholder, style, value, setValue, ...otherProps } = props;

  function isInt(n: any) {
    return n % 1 === 0;
  }

  function hasLeadingZero(str: any) {
    return str.length > 1 && str.startsWith('0');
  }

  function isValidNumber(value: any) {
    return !hasLeadingZero(value) && isInt(value);
  }

  const handleCountChange = (e: ChangeEvent<HTMLInputElement>) => {
    const intValue = parseInt(e.target.value);
    const intMin = parseInt(e.target.min);
    const intMax = parseInt(e.target.max);
    if (isValidNumber(e.target.value)) {
      if (intValue > intMax) {
        setValue(max);
      } else if (intValue < intMin) {
        setValue(min);
      } else if (e.target.value === '') {
        setValue('');
      } else {
        setValue(parseInt(e.target.value, 10));
      }
    } else {
      return;
    }
  };

  const handleDecrement = () => {
    if (value > min) {
      setValue(value - 1);
    }
  };

  const handleIncrement = () => {
    if (value < max) {
      setValue(value + 1);
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowUp') {
      handleIncrement();
    } else if (e.key === 'ArrowDown') {
      handleDecrement();
    }
  };

  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
    if (e.target.value.trim() === '') {
      setValue(min);
    }
  };

  return (
    <div className={`b-counter ${className}`} style={style} {...otherProps}>
      {label && (
        <label htmlFor={id} className="b-form-label">
          {label}
        </label>
      )}
      <div className="b-input-group">
        <div className="b-input-group-prepend">
          <button type="button" className="b-input-group-text b-counter-btn" onClick={handleDecrement} disabled={value === min}>
            &ndash;
          </button>
        </div>
        <input
          autoComplete="off"
          className="b-form-control"
          disabled={disabled}
          id={id}
          name={name}
          type="text"
          min={min}
          max={max}
          value={value}
          onBlur={handleBlur}
          onChange={handleCountChange}
          placeholder={placeholder}
          onKeyDown={handleKeyDown}
        />
        <div className="b-input-group-append">
          <button type="button" className="b-input-group-text b-counter-btn" onClick={handleIncrement} disabled={value === max}>
            +
          </button>
        </div>
      </div>
    </div>
  );
};