"use strict";

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

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const exotic_1 = require("exotic");

const words_1 = require("../../../words");

const styled_1 = require("./styled");

function defaultRangeValues(props, state) {
  const minCount = `${words_1.wording.min}: ${state.minValue}`;
  const maxCount = `${words_1.wording.max}: ${state.maxValue}`;
  return react_1.default.createElement(styled_1.FlexSpacing, null, react_1.default.createElement(styled_1.MinValue, null, minCount), react_1.default.createElement(styled_1.MaxValue, null, maxCount));
}

exports.defaultRangeValues = defaultRangeValues;

function defaultSliderInput(props, state) {
  const {
    minValue,
    maxValue,
    onMinChange,
    onMaxChange
  } = props;
  const inputAttributes = {
    type: 'range',
    step: props.stepValue,
    min: minValue,
    max: maxValue,
    list: 'stepDots',
    state
  };

  const handleMinChange = event => {
    if (exotic_1.isFunction(onMinChange)) {
      state.minValueView(event);
      onMinChange({
        minValue: state.minValue,
        maxValue: state.maxValue
      });
    }
  };

  const handleMaxChange = event => {
    if (exotic_1.isFunction(onMaxChange)) {
      state.maxValueView(event);
      onMaxChange({
        minValue: state.minValue,
        maxValue: state.maxValue
      });
    }
  };

  const renderOption = props => {
    const {
      value,
      index
    } = props;
    return react_1.default.createElement("option", {
      value: value,
      key: index
    });
  };

  return react_1.default.createElement(styled_1.InputWrapper, null, react_1.default.createElement("datalist", {
    id: 'stepDots'
  }, state.optionList.map(renderOption)), react_1.default.createElement(styled_1.StyledMinValueInput, Object.assign({
    className: 'minValue',
    onChange: handleMinChange,
    id: 'minValue',
    value: state.minValue
  }, inputAttributes)), react_1.default.createElement(styled_1.StyledMaxValueInput, Object.assign({
    className: 'maxValue',
    onChange: handleMaxChange,
    id: 'maxValue',
    value: state.maxValue
  }, inputAttributes)));
}

exports.defaultSliderInput = defaultSliderInput;

function defaultRenderBox(props, state) {
  const {
    renderSliderInput,
    renderRangeValues
  } = props,
        remainingProps = tslib_1.__rest(props, ["renderSliderInput", "renderRangeValues"]);

  return react_1.default.createElement(react_1.default.Fragment, null, renderRangeValues(remainingProps, state), renderSliderInput(remainingProps, state));
}

exports.defaultRenderBox = defaultRenderBox;

function defaultRenderWrapper(props) {
  const {
    className,
    dataQa,
    children
  } = props;
  return react_1.default.createElement(styled_1.Wrapper, {
    className: className,
    "data-qa": dataQa
  }, children);
}

exports.defaultRenderWrapper = defaultRenderWrapper; //# sourceMappingURL=renderProps.js.map