"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MinusButton = exports.PlusButton = void 0;

var _preact = require("preact");

var _classnames = _interopRequireDefault(require("classnames"));

var _icon = require("./icon");

var _button = require("./button");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const HOLD_DELAY = 180;
const ITERATION_DELAY = 90;

const getPlusMinusButton = icon => class extends _preact.Component {
  constructor(props) {
    super(props);
    this.runIt = this.runIt.bind(this);
    this.onClick = this.onClick.bind(this);
    this.onPress = this.onPress.bind(this);
    this.clear = this.clear.bind(this);
    this.holdStart = false;
  }

  runIt() {
    const {
      onClick,
      disabled
    } = this.props;

    if (onClick && !disabled) {
      onClick();
    }
  }

  componentDidMount() {
    if (this.base && this.base.addEventListener) {
      this.base.addEventListener('touchstart', this.onPress);
      this.base.addEventListener('touchend', this.clear);
      this.base.addEventListener('touchcancel', this.clear);
    }
  }

  componentWillUnmount() {
    if (this.base && this.base.removeEventListener) {
      this.base.removeEventListener('touchstart', this.onPress);
      this.base.removeEventListener('touchend', this.clear);
      this.base.removeEventListener('touchcancel', this.clear);
    }
  }

  onClick(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    this.clear();
    this.runIt();
  }

  onPress() {
    this.clear();

    const iterate = () => {
      clearTimeout(this.iterationTimer);
      let delay = this.props.iterationDelay || ITERATION_DELAY;
      const holdDuration = Date.now() - this.holdStart;

      if (holdDuration > 4000) {
        delay = delay * 0.4;
      } else if (holdDuration > 2000) {
        delay = delay * 0.5;
      }

      this.iterationTimer = setTimeout(() => {
        if (this.holdStart && !this.props.disabled) {
          this.runIt();
          iterate();
        }
      }, delay);
    };

    this.holdTimer = setTimeout(() => {
      this.holdStart = Date.now();
      iterate();
    }, this.props.holdDelay || HOLD_DELAY);
  }

  clear() {
    clearTimeout(this.holdTimer);
    clearTimeout(this.iterationTimer);
    this.holdStart = false;
  }

  render() {
    const {
      className,
      disabled,
      name
    } = this.props;
    return (0, _preact.h)(_button.Button, {
      "data-e2e": "".concat(name || '').concat(icon.charAt(0).toUpperCase()).concat(icon.slice(1), "Button"),
      type: "button",
      onContextMenu: e => {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
      },
      onClick: this.onClick,
      onMouseUp: this.clear,
      onMouseLeave: this.clear,
      onMouseDown: this.onPress,
      disabled: disabled,
      className: (0, _classnames.default)('ba br2 pa2 mv1', {
        mr2: icon === 'remove'
      }, className)
    }, (0, _preact.h)("div", {
      className: "flex items-center"
    }, (0, _preact.h)(_icon.Icon, {
      size: "18",
      icon: icon
    }), this.props.children));
  }

};

const PlusButton = getPlusMinusButton('add');
exports.PlusButton = PlusButton;
const MinusButton = getPlusMinusButton('remove');
exports.MinusButton = MinusButton;