function _extends() { _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; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from "react";
import { func, number } from "prop-types";
import MaterialSlider from "@material-ui/core/Slider";
import { withStyles } from "@material-ui/core/styles";
var ComparisonMapSlider = withStyles({
  root: {
    padding: 0,
    height: 0
  },
  thumb: {
    zIndex: 1,
    height: 40,
    width: 40,
    backgroundColor: "white",
    marginTop: -40,
    marginLeft: -20,
    boxShadow: "gray 0px 0px 3px 1px",
    "&:hover,&$active": {
      boxShadow: "gray 0px 0px 4px 2px"
    },
    "& .arrow-left": {
      width: 0,
      height: 0,
      marginRight: "12px",
      borderTop: "7px solid transparent",
      borderBottom: "7px solid transparent",
      borderRight: "7px solid lightgray"
    },
    "& .arrow-right": {
      width: 0,
      height: 0,
      borderTop: "7px solid transparent",
      borderBottom: "7px solid transparent",
      borderLeft: "7px solid lightgray"
    }
  },
  active: {},
  valueLabel: {
    left: "calc(-50% + 4px)"
  },
  track: {
    display: "none",
    height: 0
  },
  rail: {
    display: "none",
    height: 0
  }
})(MaterialSlider);

var ThumbComponent = function ThumbComponent(props) {
  return React.createElement("span", props, React.createElement("span", {
    className: "arrow-left"
  }), React.createElement("span", {
    className: "arrow-right"
  }));
};

var CompareSlider = function CompareSlider(_ref) {
  var min = _ref.min,
      max = _ref.max,
      _onChange = _ref.onChange,
      step = _ref.step,
      value = _ref.value,
      rest = _objectWithoutProperties(_ref, ["min", "max", "onChange", "step", "value"]);

  return React.createElement(ComparisonMapSlider, _extends({
    ThumbComponent: ThumbComponent,
    "aria-label": "airbnb slider",
    min: min,
    max: max,
    step: step,
    value: value,
    label: "test",
    onChange: function onChange(e, newValue) {
      return _onChange(newValue);
    }
  }, rest));
};

CompareSlider.propTypes = {
  max: number.isRequired,
  min: number.isRequired,
  onChange: func.isRequired,
  step: number,
  value: number.isRequired
};
CompareSlider.defaultProps = {
  step: 1
};
export default CompareSlider;