"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _styles = require("@material-ui/core/styles");

var _plot = require("../../plot");

var _renderUi = require("../../render-ui");

var _styles2 = require("./styles");

var _utils = require("../utils");

var _dragIcon = _interopRequireDefault(require("./drag-icon"));

var _excluded = ["x", "y", "width", "graphProps", "classes", "className", "interactive", "defineChart", "isHovered", "correctness", "color"];

var RawDragHandle = function RawDragHandle(_ref) {
  var _getScale;

  var x = _ref.x,
      y = _ref.y,
      width = _ref.width,
      graphProps = _ref.graphProps,
      classes = _ref.classes,
      className = _ref.className,
      interactive = _ref.interactive,
      defineChart = _ref.defineChart,
      isHovered = _ref.isHovered,
      correctness = _ref.correctness,
      color = _ref.color,
      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var scale = graphProps.scale;
  var scaleValue = (_getScale = (0, _utils.getScale)(width)) === null || _getScale === void 0 ? void 0 : _getScale.scale;
  return /*#__PURE__*/_react["default"].createElement("svg", {
    x: x,
    y: scale.y(y) - 10,
    width: width,
    overflow: "visible",
    className: classes.svgOverflowVisible
  }, isHovered && !correctness && interactive && /*#__PURE__*/_react["default"].createElement(_dragIcon["default"], {
    width: width,
    scaleValue: scaleValue,
    color: color,
    classes: classes
  }), interactive && !correctness && /*#__PURE__*/_react["default"].createElement("ellipse", (0, _extends2["default"])({
    cx: width / 2,
    cy: 10,
    rx: width / 2 // the drag icon has a 22px fixed r value, so the ry value is 3 times that in order to cover all the area
    ,
    ry: 66,
    className: (0, _classnames["default"])(classes.transparentHandle, className)
  }, rest)), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("filter", {
    id: "bottomShadow",
    x: "0",
    y: "0",
    width: "140%",
    height: "140%"
  }, /*#__PURE__*/_react["default"].createElement("feGaussianBlur", {
    "in": "SourceAlpha",
    stdDeviation: "3"
  }), /*#__PURE__*/_react["default"].createElement("feOffset", {
    dx: "0",
    dy: "5",
    result: "offsetblur"
  }), /*#__PURE__*/_react["default"].createElement("feFlood", {
    floodColor: "#00000033"
  }), /*#__PURE__*/_react["default"].createElement("feComposite", {
    in2: "offsetblur",
    operator: "in"
  }), /*#__PURE__*/_react["default"].createElement("feMerge", null, /*#__PURE__*/_react["default"].createElement("feMergeNode", null), /*#__PURE__*/_react["default"].createElement("feMergeNode", {
    "in": "SourceGraphic"
  })))), correctness && /*#__PURE__*/_react["default"].createElement("rect", (0, _extends2["default"])({
    y: 10,
    width: width,
    filter: "url(#bottomShadow)",
    className: (0, _classnames["default"])(classes.handle, 'handle', className, !interactive && 'non-interactive', interactive && correctness && correctness.value)
  }, rest)));
};

RawDragHandle.propTypes = {
  x: _propTypes["default"].number.isRequired,
  y: _propTypes["default"].number.isRequired,
  width: _propTypes["default"].number,
  graphProps: _plot.types.GraphPropsType.isRequired,
  classes: _propTypes["default"].object.isRequired,
  className: _propTypes["default"].string,
  interactive: _propTypes["default"].bool,
  isHovered: _propTypes["default"].bool,
  correctness: _propTypes["default"].shape({
    value: _propTypes["default"].string,
    label: _propTypes["default"].string
  }),
  color: _propTypes["default"].string
};
var DragHandle = (0, _styles.withStyles)(function () {
  return {
    handle: {
      height: '10px',
      fill: 'transparent',
      transition: 'fill 200ms linear, height 200ms linear',
      '&.correct': (0, _styles2.correct)('fill'),
      '&.incorrect': (0, _styles2.incorrect)('fill'),
      '&.non-interactive': (0, _styles2.disabled)('fill')
    },
    transparentHandle: {
      fill: 'transparent',
      clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)'
    },
    handleContainer: {
      height: 30,
      '&:hover': {
        '& .handle': {
          fill: _renderUi.color.secondaryDark(),
          height: '16px'
        }
      },
      '&.non-interactive': (0, _styles2.disabled)('fill'),
      '&.incorrect': (0, _styles2.incorrect)('fill'),
      '&.correct': (0, _styles2.correct)('fill')
    },
    svgOverflowVisible: {
      overflow: 'visible !important'
    }
  };
})(RawDragHandle);
exports.DragHandle = DragHandle;
var D = (0, _plot.gridDraggable)({
  axis: 'y',
  fromDelta: function fromDelta(props, delta) {
    //TODO: should be in grid-draggable, if axis is y delta.x should always be 0.
    delta.x = 0;

    var newPoint = _plot.utils.point(props).add(_plot.utils.point(delta));

    return newPoint.y;
  },
  bounds: function bounds(props, _ref2) {
    var domain = _ref2.domain,
        range = _ref2.range;
    var area = {
      left: 0,
      top: props.y,
      bottom: props.y,
      right: 0
    };
    return _plot.utils.bounds(area, domain, range);
  },
  anchorPoint: function anchorPoint(props) {
    return {
      x: props.x,
      y: props.y
    };
  }
})(DragHandle);
exports.D = D;
var _default = D;
exports["default"] = _default;
//# sourceMappingURL=drag-handle.js.map