var _extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _toConsumableArray(arr) {if (Array.isArray(arr)) {for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {arr2[i] = arr[i];}return arr2;} else {return Array.from(arr);}}function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self, call) {if (!self) {throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call && (typeof call === "object" || typeof call === "function") ? call : self;}function _inherits(subClass, superClass) {if (typeof superClass !== "function" && superClass !== null) {throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;}var App = function (_React$Component) {_inherits(App, _React$Component);
  function App(p) {_classCallCheck(this, App);var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this,
    p));
    _this.state = { x: 0, y: 0, circles: [] };return _this;
  }_createClass(App, [{ key: "setCoordinates", value: function setCoordinates(
    newX, newY) {
      this.setState({ x: newX, y: newY });
    } }, { key: "clicked", value: function clicked()
    {var _this2 = this;
      //add a new circle
      this.setState(
      {
        circles: [].concat(_toConsumableArray(this.state.circles), [this.makeCircle()]) },

      function () {
        console.log("New state", _this2.state);
      });

    } }, { key: "removeCircleByIndex", value: function removeCircleByIndex(

    index) {
      this.setState({
        circles: this.state.circles.filter(function (c) {
          return c.index !== index; //filter: return true to keep item, return false to discard item.
        }) });

    } }, { key: "makeCircle", value: function makeCircle()

    {
      return {
        x: this.state.x,
        y: this.state.y,
        index: this.getNextIndex() };

    } }, { key: "getNextIndex", value: function getNextIndex()

    {
      // if we have items, return next id, else return 0
      var lastItem = this.state.circles[this.state.circles.length - 1];
      if (lastItem) {
        return lastItem.index + 1;
      } else {
        return 0;
      }
    } }, { key: "render", value: function render()

    {var _this3 = this;
      return (
        React.createElement("div", { className: "App" },
          React.createElement("div", {
            onMouseMove: function onMouseMove(e) {
              _this3.setCoordinates(e.clientX, e.clientY);
            },
            onClick: function onClick() {
              _this3.clicked();
            },
            className: "box" }),

          this.state.circles.map(function (c) {
            //loop though all circles
            return (
              React.createElement(Circle, _extends({
                onClick: function onClick() {
                  _this3.removeCircleByIndex(c.index);
                },
                key: c.index },
              c)));


          }),

          React.createElement("p", null,
            this.state.x, " - ", this.state.y)));



    } }]);return App;}(React.Component);


var rootElement = document.getElementById("root");
ReactDOM.render(React.createElement(App, null), rootElement);

var Circle = function Circle(props) {
  return (
    React.createElement("div", {
        onClick: function onClick() {
          props.onClick();
        },
        style: {
          position: "absolute",
          cursor: "pointer",
          left: props.x - 25,
          top: props.y - 25,
          width: 50,
          height: 50,
          borderRadius: 25,
          border: "1px solid black",
          textAlign: "center",
          lineHeight: "50px" } },


      props.index));


};