"use strict";

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

var _preact = require("preact");

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

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

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

const MAX = 80;
const MAX_SPEED = 5;

class _default extends _preact.Component {
  constructor(props) {
    super(props);
    this.onStart = this.onStart.bind(this);
    this.onTouchStart = this.onTouchStart.bind(this);
    this.onMouseMove = this.onMouseMove.bind(this);
    this.onTouchMove = this.onTouchMove.bind(this);
    this.onEnd = this.onEnd.bind(this);
    this.startUpdates = this.startUpdates.bind(this);
    this.recalculateValue = this.recalculateValue.bind(this);
    this.state = {
      dragging: false,
      value: 0,
      position: 0
    };
  }

  componentDidMount() {
    this.handle = this.base.querySelector('.js-handle');
    this.handle.addEventListener('touchstart', this.onTouchStart, {
      passive: false
    });
  }

  onStart(e) {
    e.preventDefault();
    this.setState({
      dragging: true
    });
    this.startPosition = null;
    window.addEventListener('mousemove', this.onMouseMove);
    window.addEventListener('mouseup', this.onEnd);
    this.startUpdates();
  }

  onTouchStart(e) {
    e.preventDefault();
    this.setState({
      dragging: true
    });
    this.startPosition = null;
    window.addEventListener('touchmove', this.onTouchMove, {
      passive: false
    });
    window.addEventListener('touchend', this.onEnd);
    this.startUpdates();
  }

  onMouseMove(e) {
    e.preventDefault();

    if (!this.startPosition) {
      this.startPosition = e.pageY;
    }

    const diff = this.startPosition - e.pageY;
    this.setPosition(diff);
  }

  onTouchMove(e) {
    const touch = e.changedTouches[0];
    e.preventDefault();

    if (!this.startPosition) {
      this.startPosition = touch.pageY;
    }

    const diff = this.startPosition - touch.pageY;
    this.setPosition(diff);
  }

  onEnd() {
    this.setState({
      dragging: false
    });
    window.removeEventListener('mousemove', this.onMouseMove);
    this.startPosition = null;
    this.setPosition(0);
  }

  setPosition(position) {
    const sign = position < 0 ? -1 : 1;
    const adjustedPosition = Math.abs(position) > MAX ? MAX * sign : position;
    this.setState({
      position: adjustedPosition
    });
  }

  startUpdates() {
    const {
      dragging,
      position
    } = this.state;

    if (dragging) {
      let value = 0;

      if (position) {
        value = Math.round(position / MAX * 100) / 100;
      }

      const abs = Math.abs(value);
      this.recalculateValue(value);
      const delay = 1000 / (abs * 100 / 8);

      if (abs) {
        setTimeout(this.startUpdates, Math.min(delay, 1000));
      } else {
        setTimeout(this.startUpdates, 100);
      }
    }
  }

  componentWillUnmount() {
    this.handle.removeEventListener('touchstart', this.onTouchStart, {
      passive: false
    });
  }

  recalculateValue(rate) {
    const delta = Math.round(rate * MAX_SPEED);
    const newValue = this.state.value + delta;
    this.setState({
      value: newValue
    });
  }

  render(props, {
    value,
    position,
    dragging
  }) {
    return (0, _preact.h)("div", {
      style: {
        height: '300px',
        paddingTop: '100px'
      }
    }, (0, _preact.h)("div", {
      className: "flex items-center"
    }, (0, _preact.h)("div", {
      className: "mr3 w3"
    }, value, " mg"), (0, _preact.h)("div", {
      className: "relative",
      style: {
        height: '44px'
      }
    }, (0, _preact.h)("div", {
      className: (0, _classnames.default)('bg-light-gray absolute br-pill', {
        dn: !dragging
      }),
      style: {
        height: '200px',
        width: '44px',
        top: '-78px'
      }
    }, (0, _preact.h)(_icon.Icon, {
      icon: "fast_forward",
      className: "absolute gray",
      size: "32",
      style: {
        top: '10px',
        left: '6px',
        transform: 'rotate(-90deg)'
      }
    }), (0, _preact.h)(_icon.Icon, {
      icon: "fast_forward",
      className: "absolute gray",
      size: "32",
      style: {
        bottom: '10px',
        left: '6px',
        transform: 'rotate(90deg)'
      }
    })), (0, _preact.h)("div", {
      onMouseDown: this.onStart,
      className: "js-handle absolute bg-blue br-100 shadow-2",
      style: {
        width: '44px',
        height: '44px',
        transform: "translateY(".concat(-position, "px)")
      }
    }, (0, _preact.h)("input", {
      className: "dn",
      value: 0,
      type: "number",
      max: "5",
      min: "-5",
      step: "1"
    }), (0, _preact.h)(_icon.Icon, {
      icon: "keyboard_arrow_up",
      className: "absolute white",
      style: {
        top: '2px',
        left: '10px'
      }
    }), (0, _preact.h)(_icon.Icon, {
      icon: "keyboard_arrow_down",
      className: "absolute white",
      style: {
        top: '18px',
        left: '10px'
      }
    })))));
  }

}

exports.default = _default;