"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PercentSlider = void 0;

require("./styles.css");

var _Label = _interopRequireDefault(require("../Form/Label"));

var _Box = _interopRequireDefault(require("../../experimental/Box"));

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var handleChange = function handleChange(percentageInput, onChange) {
  var percentage = parseInt(percentageInput, 10);

  if (isNaN(percentage)) {
    onChange(0);
    return;
  }

  if (percentage > 100) {
    return;
  }

  onChange(percentage);
};

var PercentSlider = function PercentSlider(_ref) {
  var value = _ref.value,
      _onChange = _ref.onChange,
      label = _ref.label,
      id = _ref.id;
  return _react.default.createElement("div", null, _react.default.createElement(_Label.default, {
    htmlFor: id
  }, label), _react.default.createElement(Slider, {
    onChange: function onChange(newValue) {
      return handleChange(newValue, _onChange);
    },
    value: value,
    id: id
  }));
};

exports.PercentSlider = PercentSlider;

var Slider = function Slider(_ref2) {
  var value = _ref2.value,
      _onChange2 = _ref2.onChange,
      id = _ref2.id;
  return _react.default.createElement(_Box.default, null, _react.default.createElement("input", {
    id: id,
    "data-testid": "".concat(id, "-slider"),
    className: "percentage-input",
    value: "".concat(value),
    onChange: function onChange(e) {
      return _onChange2(e.target.value);
    },
    type: "range",
    min: "0",
    max: "100",
    style: {
      "--webkitProgressPercent": "".concat(value, "%")
    }
  }), _react.default.createElement("span", {
    className: "percentage-input-wrapper"
  }, _react.default.createElement("span", {
    "data-testid": "".concat(id, "-display"),
    className: "percentage-display"
  }, value), _react.default.createElement("span", null, "%")));
};