import React from 'react';
import { f as _inherits, g as _createClass, h as _classCallCheck, i as _getPrototypeOf, j as _possibleConstructorReturn } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';

var css = ".Digit_digit__1XzQi {\n  line-height: 16px;\n  display: flex;\n  flex-direction: column; }\n  .Digit_digit__1XzQi.Digit_animating__2UCZ0 {\n    transition: 0.3s ease-out; }\n\n.Digit_digitNumber__3esq0.Digit_active__wBDqE {\n  opacity: 1; }\n";
var styles = {"digit":"Digit_digit__1XzQi","animating":"Digit_animating__2UCZ0","digitNumber":"Digit_digitNumber__3esq0","active":"Digit_active__wBDqE"};
styleInject(css);

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

var Digit =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Digit, _React$Component);

  var _super = _createSuper(Digit);

  function Digit(props) {
    var _this;

    _classCallCheck(this, Digit);

    _this = _super.call(this, props);
    _this.state = {
      value: props.children
    };
    return _this;
  }

  _createClass(Digit, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.value > nextProps.value) {
        this.componentWillDecrement(nextProps);
      } else {
        this.componentWillIncrement(nextProps);
      }
    }
  }, {
    key: "componentWillDecrement",
    value: function componentWillDecrement(nextProps) {
      var _this2 = this;

      if (this.props.children < nextProps.children) {
        this.setState({
          value: nextProps.children - 10,
          animating: true
        }, function () {
          setTimeout(function () {
            return _this2.setState({
              value: nextProps.children,
              animating: false
            });
          }, 250);
        });
      } else if (this.props.children !== nextProps.children) {
        this.setState({
          value: nextProps.children,
          animating: true
        });
      }
    }
  }, {
    key: "componentWillIncrement",
    value: function componentWillIncrement(nextProps) {
      var _this3 = this;

      if (this.props.children > nextProps.children) {
        this.setState({
          value: nextProps.children + 10,
          animating: true
        }, function () {
          setTimeout(function () {
            return _this3.setState({
              value: nextProps.children,
              animating: false
            });
          }, 250);
        });
      } else if (this.props.children !== nextProps.children) {
        this.setState({
          value: nextProps.children,
          animating: true
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var top = (this.state.value + 10) * this.props.fontSize;
      var animatingClassName = this.state.animating ? styles.animating : "";
      return React.createElement("span", {
        style: {
          transform: "translateY(-".concat(top, "px)"),
          lineHeight: "".concat(this.props.fontSize, "px")
        },
        className: "".concat(styles.digit, " ").concat(animatingClassName, " ").concat(this.props.className, "-wrapper")
      }, new Array(30).fill(0).map(function (_, i) {
        var active = i === _this4.props.children;
        var activeClassName = active % 10 ? styles.active : "";
        return React.createElement("span", {
          "data-testid": active ? "odometer-value" : undefined,
          key: i,
          className: "".concat(styles.digitNumber, " ").concat(activeClassName, " ").concat(_this4.props.className, "-value")
        }, i % 10);
      }));
    }
  }]);

  return Digit;
}(React.Component);
Digit.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  fontSize: PropTypes.number
};
Digit.defaultProps = {
  className: "",
  fontSize: 16
};
Digit.__docgenInfo = {
  "description": "",
  "methods": [{
    "name": "componentWillDecrement",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "nextProps",
      "type": null
    }],
    "returns": null
  }, {
    "name": "componentWillIncrement",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "nextProps",
      "type": null
    }],
    "returns": null
  }],
  "displayName": "Digit",
  "props": {
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "fontSize": {
      "defaultValue": {
        "value": "16",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    },
    "children": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    },
    "value": {
      "type": {
        "name": "union",
        "value": [{
          "name": "string"
        }, {
          "name": "number"
        }]
      },
      "required": false,
      "description": ""
    }
  }
};

var css$1 = ".Odometer_odometer__3qQiW {\n  height: 16px;\n  overflow: hidden;\n  display: flex;\n  align-items: flex-start; }\n";
var styles$1 = {"odometer":"Odometer_odometer__3qQiW"};
styleInject(css$1);

/* eslint-disable react/no-multi-comp */

var Odometer = function Odometer(_ref) {
  var children = _ref.children,
      fontSize = _ref.fontSize,
      onClick = _ref.onClick,
      innerRef = _ref.innerRef,
      className = _ref.className,
      prefixClassName = _ref.prefixClassName;
  var string = children;
  if (!string) return null;
  string = typeof string === "number" ? string.toString() : string;
  string = Array.isArray(string) ? string.join("") : string;
  return React.createElement("span", {
    "data-testid": "odometer",
    style: {
      fontSize: fontSize,
      height: "".concat(fontSize, "px")
    },
    ref: innerRef,
    onClick: onClick,
    className: "".concat(styles$1.odometer, " ").concat(className, " ").concat(prefixClassName)
  }, string.split("").map(function (letter, i) {
    if (!Number.isNaN(parseInt(letter, 10))) {
      return React.createElement(Digit, {
        fontSize: fontSize,
        value: string,
        key: i,
        className: "".concat(prefixClassName, "-digit")
      }, parseInt(letter, 10));
    }

    return React.createElement("span", {
      style: {
        lineHeight: "".concat(fontSize, "px")
      },
      className: "".concat(prefixClassName, "-digit-value")
    }, letter);
  }));
};

Odometer.propTypes = {
  /** The classname to be appended to the outermost element */
  className: PropTypes.string,

  /** prefix to be appended to the child elements */
  prefixClassName: PropTypes.string,

  /** Onclick function */
  onClick: PropTypes.func,

  /** Reference hook for span */
  innerRef: PropTypes.func,

  /** Other children to render */
  children: PropTypes.node,

  /** Font size of letter inside odometer */
  fontSize: PropTypes.number
};
Odometer.defaultProps = {
  fontSize: 16,
  className: "",
  prefixClassName: "",
  onClick: function onClick() {},
  innerRef: function innerRef() {}
};
Odometer.classNames = {
  $prefix: "Outermost element",
  "$prefix-digit-wrapper": "Element wrapping the value",
  "$prefix-digit-value": "Value element in Odometer"
};
Odometer.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Odometer",
  "props": {
    "fontSize": {
      "defaultValue": {
        "value": "16",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Font size of letter inside odometer"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to be appended to the outermost element"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "prefix to be appended to the child elements"
    },
    "onClick": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Onclick function"
    },
    "innerRef": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Reference hook for span"
    },
    "children": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "Other children to render"
    }
  }
};

export default Odometer;
