'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var base$1 = require('./variations/_size/base.js');
var base = require('./variations/_view/base.js');
var base$4 = require('./variations/_slider-view/base.js');
var base$5 = require('./variations/_hint-view/base.js');
var base$6 = require('./variations/_hint-size/base.js');
var base$2 = require('./variations/_disabled/base.js');
var base$3 = require('./variations/_readonly/base.js');
var TextFieldSlider_styles = require('./TextFieldSlider.styles.js');
var index = require('./utils/index.js');
var Input = require('./ui/Input/Input.js');
var Slider = require('./ui/Slider/Slider.js');
var reactNumberFormat = require('react-number-format');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var _excluded = ["id", "className", "style", "hasPointer", "hasScale", "scaleTicks", "titleCaption", "contentLeft", "contentRight", "textBefore", "textAfter", "required", "requiredPlacement", "optional", "optionalText", "hasRequiredIndicator", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintTargetPlacement", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "hintPortal", "view", "sliderView", "size", "readOnly", "disabled", "value", "defaultValue", "min", "max", "step", "decimalScale", "thousandsGroupStyle", "thousandSeparator", "decimalSeparator", "fixedDecimalScale", "onChange", "onChangeSlider", "onChangeTextField"];
var HINT_DEFAULT_OFFSET = [0, 0];
var textFieldSliderRoot = function textFieldSliderRoot(Root) {
  return /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    var id = _ref.id,
      className = _ref.className,
      style = _ref.style,
      _ref$hasPointer = _ref.hasPointer,
      hasPointer = _ref$hasPointer === void 0 ? true : _ref$hasPointer,
      hasScale = _ref.hasScale,
      scaleTicks = _ref.scaleTicks,
      titleCaption = _ref.titleCaption,
      contentLeft = _ref.contentLeft,
      contentRight = _ref.contentRight,
      textBefore = _ref.textBefore,
      textAfter = _ref.textAfter,
      required = _ref.required,
      _ref$requiredPlacemen = _ref.requiredPlacement,
      requiredPlacement = _ref$requiredPlacemen === void 0 ? 'right' : _ref$requiredPlacemen,
      optional = _ref.optional,
      optionalText = _ref.optionalText,
      _ref$hasRequiredIndic = _ref.hasRequiredIndicator,
      hasRequiredIndicator = _ref$hasRequiredIndic === void 0 ? false : _ref$hasRequiredIndic,
      _ref$hintTrigger = _ref.hintTrigger,
      hintTrigger = _ref$hintTrigger === void 0 ? 'hover' : _ref$hintTrigger,
      hintText = _ref.hintText,
      _ref$hintView = _ref.hintView,
      hintView = _ref$hintView === void 0 ? 'default' : _ref$hintView,
      _ref$hintSize = _ref.hintSize,
      hintSize = _ref$hintSize === void 0 ? 'm' : _ref$hintSize,
      hintTargetIcon = _ref.hintTargetIcon,
      _ref$hintTargetPlacem = _ref.hintTargetPlacement,
      hintTargetPlacement = _ref$hintTargetPlacem === void 0 ? 'outer' : _ref$hintTargetPlacem,
      _ref$hintPlacement = _ref.hintPlacement,
      hintPlacement = _ref$hintPlacement === void 0 ? 'auto' : _ref$hintPlacement,
      hintHasArrow = _ref.hintHasArrow,
      _ref$hintOffset = _ref.hintOffset,
      hintOffset = _ref$hintOffset === void 0 ? HINT_DEFAULT_OFFSET : _ref$hintOffset,
      hintWidth = _ref.hintWidth,
      hintContentLeft = _ref.hintContentLeft,
      hintPortal = _ref.hintPortal,
      view = _ref.view,
      _ref$sliderView = _ref.sliderView,
      sliderView = _ref$sliderView === void 0 ? 'default' : _ref$sliderView,
      size = _ref.size,
      _ref$readOnly = _ref.readOnly,
      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      outerValue = _ref.value,
      defaultValue = _ref.defaultValue,
      min = _ref.min,
      max = _ref.max,
      step = _ref.step,
      _ref$decimalScale = _ref.decimalScale,
      decimalScale = _ref$decimalScale === void 0 ? 2 : _ref$decimalScale,
      _ref$thousandsGroupSt = _ref.thousandsGroupStyle,
      thousandsGroupStyle = _ref$thousandsGroupSt === void 0 ? 'none' : _ref$thousandsGroupSt,
      _ref$thousandSeparato = _ref.thousandSeparator,
      thousandSeparator = _ref$thousandSeparato === void 0 ? '' : _ref$thousandSeparato,
      _ref$decimalSeparator = _ref.decimalSeparator,
      decimalSeparator = _ref$decimalSeparator === void 0 ? '.' : _ref$decimalSeparator,
      _ref$fixedDecimalScal = _ref.fixedDecimalScale,
      fixedDecimalScale = _ref$fixedDecimalScal === void 0 ? false : _ref$fixedDecimalScal,
      onChange = _ref.onChange,
      onChangeSlider = _ref.onChangeSlider,
      onChangeTextField = _ref.onChangeTextField,
      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
    var _useState = React.useState(defaultValue !== undefined ? defaultValue : ''),
      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
      innerValue = _useState2[0],
      setInnerValue = _useState2[1];
    var value = outerValue !== undefined ? outerValue : innerValue;
    var formatterArgs = React.useMemo(function () {
      return index.createFormatterArgs({
        decimalScale: decimalScale,
        thousandsGroupStyle: thousandsGroupStyle,
        thousandSeparator: thousandSeparator,
        decimalSeparator: decimalSeparator,
        fixedDecimalScale: fixedDecimalScale
      });
    }, [decimalScale, thousandsGroupStyle, thousandSeparator, decimalSeparator, fixedDecimalScale]);
    var formattedMin = React.useMemo(function () {
      return reactNumberFormat.numericFormatter(String(min) || '', formatterArgs);
    }, [min, formatterArgs]);
    var formattedMax = React.useMemo(function () {
      return reactNumberFormat.numericFormatter(String(max) || '', formatterArgs);
    }, [max, formatterArgs]);
    var handleTickClick = function handleTickClick(tick) {
      if (disabled || readOnly) return;
      var clamped = Math.max(min, Math.min(max, tick));
      setInnerValue(clamped);
      var formatted = reactNumberFormat.numericFormatter(String(clamped), formatterArgs);
      if (onChange) {
        onChange(undefined, {
          raw: clamped,
          formatted: formatted
        });
      }
      if (onChangeSlider) {
        onChangeSlider({
          raw: clamped,
          formatted: formatted
        });
      }
    };
    return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
      view: view,
      size: size,
      disabled: disabled,
      readOnly: !disabled && readOnly,
      "data-root": true,
      className: className,
      style: style,
      sliderView: sliderView
    }, hintText && {
      hintView: hintView,
      hintSize: hintSize
    }), /*#__PURE__*/React__default.default.createElement(TextFieldSlider_styles.SliderWithHelpersWrapper, null, /*#__PURE__*/React__default.default.createElement(Input.Input, _rollupPluginBabelHelpers.extends({
      ref: ref,
      id: id,
      value: value,
      min: min,
      max: max,
      decimalScale: decimalScale,
      thousandsGroupStyle: thousandsGroupStyle,
      thousandSeparator: thousandSeparator,
      decimalSeparator: decimalSeparator,
      fixedDecimalScale: fixedDecimalScale,
      disabled: disabled,
      readOnly: readOnly,
      titleCaption: titleCaption,
      contentLeft: contentLeft,
      contentRight: contentRight,
      textBefore: textBefore,
      textAfter: textAfter,
      required: required,
      requiredPlacement: requiredPlacement,
      optional: optional,
      optionalText: optionalText,
      hasRequiredIndicator: hasRequiredIndicator
    }, hintText ? {
      hintText: hintText,
      hintView: hintView,
      hintSize: hintSize,
      hintTrigger: hintTrigger,
      hintTargetIcon: hintTargetIcon,
      hintPlacement: hintPlacement,
      hintHasArrow: hintHasArrow,
      hintOffset: hintOffset,
      hintWidth: hintWidth,
      hintContentLeft: hintContentLeft,
      hintPortal: hintPortal,
      hintTargetPlacement: hintTargetPlacement
    } : {
      hintText: undefined
    }, {
      setInnerValue: setInnerValue,
      onChange: onChange,
      onChangeTextField: onChangeTextField
    }, rest)), /*#__PURE__*/React__default.default.createElement(TextFieldSlider_styles.SliderContainer, null, /*#__PURE__*/React__default.default.createElement(Slider.SliderUI, {
      value: value,
      min: min,
      max: max,
      step: step,
      decimalScale: decimalScale,
      thousandsGroupStyle: thousandsGroupStyle,
      thousandSeparator: thousandSeparator,
      decimalSeparator: decimalSeparator,
      fixedDecimalScale: fixedDecimalScale,
      disabled: disabled,
      readOnly: readOnly,
      hasPointer: hasPointer,
      onChange: onChange,
      onChangeSlider: onChangeSlider,
      setInnerValue: setInnerValue
    }))), hasScale && !scaleTicks && /*#__PURE__*/React__default.default.createElement(TextFieldSlider_styles.ScaleWrapper, null, /*#__PURE__*/React__default.default.createElement(TextFieldSlider_styles.ScaleValue, null, formattedMin), /*#__PURE__*/React__default.default.createElement(TextFieldSlider_styles.ScaleValue, null, formattedMax)), scaleTicks && /*#__PURE__*/React__default.default.createElement(TextFieldSlider_styles.ScaleTicksWrapper, null, scaleTicks.map(function (tick) {
      var percent = Math.max(0, Math.min(100, (tick - min) / (max - min) * 100));
      var numericValue = Number(value) || min;
      return /*#__PURE__*/React__default.default.createElement(TextFieldSlider_styles.ScaleTick, {
        key: tick,
        style: {
          left: "".concat(percent, "%")
        },
        onClick: function onClick() {
          return handleTickClick(tick);
        }
      }, /*#__PURE__*/React__default.default.createElement(TextFieldSlider_styles.ScaleTickDot, {
        filled: tick <= numericValue
      }), /*#__PURE__*/React__default.default.createElement(TextFieldSlider_styles.ScaleTickLabel, null, reactNumberFormat.numericFormatter(String(tick), formatterArgs)));
    })));
  });
};
var textFieldSliderConfig = {
  name: 'TextFieldSlider',
  tag: 'div',
  layout: textFieldSliderRoot,
  base: TextFieldSlider_styles.base,
  variations: {
    view: {
      css: base.base
    },
    size: {
      css: base$1.base
    },
    disabled: {
      css: base$2.base,
      attrs: true
    },
    readOnly: {
      css: base$3.base,
      attrs: true
    },
    sliderView: {
      css: base$4.base
    },
    hintView: {
      css: base$5.base
    },
    hintSize: {
      css: base$6.base
    }
  },
  defaults: {
    size: 'm',
    view: 'default',
    sliderView: 'default'
  }
};

exports.textFieldSliderConfig = textFieldSliderConfig;
exports.textFieldSliderRoot = textFieldSliderRoot;
