import _range from "ramda/src/range";
import React from 'react';
import styled from 'styled-components';
import { isNumber } from '../../common/utils';
import { Box, Flexbox } from '../..';
var Indicator = styled(Box).withConfig({
  displayName: "BarScale__Indicator",
  componentId: "sc-15hgyor-0"
})(["height:", "px;background:", ";border-radius:", ";"], function (p) {
  return p.theme.spacing.unit(p.$barHeight);
}, function (p) {
  return p.$isActive ? p.theme.colorTokens.action.background_data_risk : p.theme.colorTokens.neutral.background_strong;
}, function (p) {
  return p.theme.borderRadius(1);
});
export var BarScale = function BarScale(_ref) {
  var _R$range;
  var _ref$value = _ref.value,
    value = _ref$value === void 0 ? 0 : _ref$value,
    _ref$max = _ref.max,
    max = _ref$max === void 0 ? 7 : _ref$max,
    _ref$axisLabel = _ref.axisLabel,
    axisLabel = _ref$axisLabel === void 0 ? null : _ref$axisLabel,
    _ref$barHeight = _ref.barHeight,
    barHeight = _ref$barHeight === void 0 ? 3 : _ref$barHeight,
    _ref$gutter = _ref.gutter,
    gutter = _ref$gutter === void 0 ? 1 : _ref$gutter;
  var verifiedMaxRating = isNumber(max) ? max : 7;
  var clampedValue = isNumber(value) ? Math.max(0, Math.min(value, max)) : 0;
  var isActive = function isActive(bar) {
    return bar <= clampedValue;
  };
  return React.createElement(React.Fragment, null, React.createElement(Flexbox, {
    container: true,
    gap: gutter
  }, (_R$range = _range(1, verifiedMaxRating + 1)) === null || _R$range === void 0 ? void 0 : _R$range.map(function (bar) {
    return React.createElement(Flexbox, {
      key: bar,
      item: true,
      flex: "1 1 auto"
    }, React.createElement(Indicator, {
      $isActive: isActive(bar),
      $barHeight: barHeight
    }));
  })), axisLabel);
};
export default BarScale;