"use strict";

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

var _lodash = require("lodash");

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _primitives = require("../../../primitives");

var _typography = require("../../typography");

var _branding = require("../../../mixins/branding");

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

var getRangeInputBackgroundColor = function getRangeInputBackgroundColor(_ref) {
  var theme = _ref.theme,
      greyOut = _ref.greyOut;
  var colorCode = greyOut ? 'greyscale-medium' : 'brand-secondary-base';
  return (0, _branding.getPaletteColor)(colorCode)({
    theme: theme
  });
};

var getWidth = function getWidth(_ref2) {
  var value = _ref2.value,
      options = _ref2.options;
  var index = (0, _lodash.indexOf)(options, value); // want 0-indexed length

  return "".concat(index / (options.length - 1) * 100);
};

var StyledRangeInput = _styledComponents["default"].input.withConfig({
  displayName: "StyledRangeInput",
  componentId: "sc-1cxx1uu-0"
})(["appearance:none;margin:12px 0 0;width:100%;height:6px;background:linear-gradient( to right,", " 0%,", " ", "%,", " ", "%,", " 100% );::-webkit-slider-runnable-track{border-radius:3px;cursor:pointer;height:6px;width:100%;}::-webkit-slider-thumb{appearance:none;background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.2);cursor:pointer;height:20px;margin-top:-7px;width:20px;}::-moz-range-track{background:", ";border-radius:3px;cursor:pointer;height:6px;width:100%;}::-moz-range-thumb{background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.2);cursor:pointer;height:20px;width:20px;}::-moz-range-progress{background:", ";border-radius:3px;cursor:pointer;height:6px;width:100%;}::-ms-track{background:transparent;border-color:transparent;color:transparent;cursor:pointer;height:6px;width:100%;}::-ms-fill-lower{background:", ";border-radius:3px;}::-ms-fill-upper{background:", ";border-radius:3px;}::-ms-thumb{background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.2);cursor:pointer;height:20px;width:20px;}:focus{outline:none;}::-webkit-slider-thumb:focus,::-moz-range-thumb:focus,::-ms-range-thumb:focus{border:2px solid ", ";}"], getRangeInputBackgroundColor, getRangeInputBackgroundColor, getWidth, (0, _branding.getPaletteColor)('greyscale-light'), getWidth, (0, _branding.getPaletteColor)('greyscale-light'), (0, _branding.getPaletteColor)('greyscale-light'), getRangeInputBackgroundColor, getRangeInputBackgroundColor, (0, _branding.getPaletteColor)('greyscale-light'), (0, _branding.getPaletteColor)('greyscale-darker'));

var NoMarginText = (0, _styledComponents["default"])(_typography.Text).withConfig({
  displayName: "NoMarginText",
  componentId: "sc-1cxx1uu-1"
})(["margin-bottom:0;"]);
exports.NoMarginText = NoMarginText;
var SliderContainer = (0, _styledComponents["default"])(_primitives.Box).withConfig({
  displayName: "SliderContainer",
  componentId: "sc-1cxx1uu-2"
})(["position:relative;width:100%;"]);
var SliderLabel = (0, _styledComponents["default"])(_typography.Head5).withConfig({
  displayName: "SliderLabel",
  componentId: "sc-1cxx1uu-3"
})(["color:", ";"], (0, _branding.getPaletteColor)('greyscale-dark'));

var Labels = function Labels(_ref3) {
  var minLabel = _ref3.minLabel,
      maxLabel = _ref3.maxLabel;
  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(SliderLabel, {
    align: "left"
  }, minLabel), _react["default"].createElement(SliderLabel, {
    align: "right"
  }, maxLabel));
};

var LegendContainer = function LegendContainer(_ref4) {
  var children = _ref4.children;
  return _react["default"].createElement(_primitives.Box, {
    stacked: "row",
    justify: "space-between",
    align: "center",
    spacing: "pt1"
  }, children);
};

var Range = function Range(_ref5) {
  var selectedScore = _ref5.selectedScore,
      permittedScores = _ref5.permittedScores,
      onRangeChange = _ref5.onRangeChange,
      _ref5$minLabel = _ref5.minLabel,
      minLabel = _ref5$minLabel === void 0 ? '' : _ref5$minLabel,
      _ref5$maxLabel = _ref5.maxLabel,
      maxLabel = _ref5$maxLabel === void 0 ? '' : _ref5$maxLabel;
  var minimumScore = (0, _lodash.min)(permittedScores);
  var maximumScore = (0, _lodash.max)(permittedScores);
  return _react["default"].createElement(SliderContainer, {
    spacing: "mt1"
  }, _react["default"].createElement(StyledRangeInput, {
    type: "range",
    min: minimumScore,
    max: maximumScore,
    options: permittedScores,
    value: selectedScore,
    onChange: function onChange(event) {
      return onRangeChange(parseInt(event.target.value, 10));
    }
  }), _react["default"].createElement(LegendContainer, null, _react["default"].createElement(Labels, {
    minLabel: (0, _lodash.isEmpty)(minLabel) ? minimumScore.toString() : minLabel,
    maxLabel: (0, _lodash.isEmpty)(maxLabel) ? maximumScore.toString() : maxLabel
  })));
};

exports.Range = Range;