import { slicedToArray as _slicedToArray, objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState } from 'react';
import { styled } from '@mui/material/styles';
import { tooltipClasses } from '@mui/material/Tooltip';
import { Tooltip, Slider } from '@mui/material';
import { SliderWrapper } from './style.js';
import theme from '../../../Globals/theme.js';
import { ThemeProvider } from 'styled-components';
import globalStyle from '../../../Globals/global-styles.js';

var _excluded = ["className"];
var marks = [{
  value: 0
}, {
  value: 4.166
}, {
  value: 8.332
}, {
  value: 12.498
}, {
  value: 16.664
}, {
  value: 20.83
}, {
  value: 24.996
}, {
  value: 29.162
}, {
  value: 33.328
}, {
  value: 37.494
}, {
  value: 41.66
}, {
  value: 45.826
}, {
  value: 49.992
}, {
  value: 54.158
}, {
  value: 58.324
}, {
  value: 62.49
}, {
  value: 66.656
}, {
  value: 70.822
}, {
  value: 74.988
}, {
  value: 79.154
}, {
  value: 83.32
}, {
  value: 87.486
}, {
  value: 91.652
}, {
  value: 95.818
}, {
  value: 100
}];

var TooltipHourScaledSlider = function TooltipHourScaledSlider() {
  var _React$useState = React__default.useState([20.83, 62.49]),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      value = _React$useState2[0],
      setValue = _React$useState2[1];

  var _useState = useState(marks.findIndex(function (mark) {
    return mark.value === value[0];
  })),
      _useState2 = _slicedToArray(_useState, 2),
      pointer1 = _useState2[0],
      setPointer1 = _useState2[1];

  var _useState3 = useState(marks.findIndex(function (mark) {
    return mark.value === value[1];
  })),
      _useState4 = _slicedToArray(_useState3, 2),
      pointer2 = _useState4[0],
      setPointer2 = _useState4[1];

  var SliderTooltip = styled(function (_ref) {
    var className = _ref.className,
        props = _objectWithoutProperties(_ref, _excluded);

    return /*#__PURE__*/React__default.createElement(Tooltip, _extends({}, props, {
      arrow: true,
      classes: {
        popper: className
      }
    }));
  })(function (_ref2) {
    var _ref3;

    _ref2.theme;
    return _ref3 = {}, _defineProperty(_ref3, "& .".concat(tooltipClasses.arrow), {
      color: "#272727"
    }), _defineProperty(_ref3, "& .".concat(tooltipClasses.tooltip), {
      backgroundColor: "#272727",
      borderRadius: "20px",
      maxWidth: "auto",
      maxHeight: "auto",
      textAlign: "center",
      padding: "4px 10px",
      top: "15px"
    }), _ref3;
  });

  function valueLabelFormat(value) {
    return marks.findIndex(function (mark) {
      return mark.value === value;
    });
  }

  var handleChange = function handleChange(newValue) {
    setValue(newValue);
    setPointer1(marks.findIndex(function (mark) {
      return mark.value === newValue[0];
    }));
    setPointer2(marks.findIndex(function (mark) {
      return mark.value === newValue[1];
    }));
  };

  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React__default.createElement(globalStyle, null), /*#__PURE__*/React__default.createElement(SliderWrapper, null, /*#__PURE__*/React__default.createElement(SliderTooltip, {
    title: "".concat(pointer1, " - ").concat(pointer2, " hrs"),
    placement: "top"
  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Slider, {
    "aria-label": "Restricted values",
    value: value,
    valueLabelFormat: valueLabelFormat,
    step: null,
    valueLabelDisplay: "auto",
    marks: marks,
    onChange: handleChange
  })))));
};

export { TooltipHourScaledSlider as default };
//# sourceMappingURL=index.js.map
