"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.SlideFilter = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

var _lib = require("@sentecacommerce-theme/lib");

var _index = require("../index");

var _Common = require("../../../../../Common");

var _templateObject, _templateObject2, _templateObject3;

var SlideFilter = function SlideFilter(_ref) {
  var data = _ref.data,
      labels = _ref.labels;
  var raw = data.raw;

  var _ref2 = raw.result || {},
      min = _ref2.min,
      max = _ref2.max;

  var _useSlideFilter = (0, _lib.useSlideFilter)(data.raw.name, min, max),
      value = _useSlideFilter.value,
      updateValue = _useSlideFilter.updateValue;

  var onChange = (0, _react.useCallback)(function (name, e) {
    var _extends2;

    var val = e.target.value;
    if (isNaN(+val)) return;
    val = Number(val.split('.')[0]) * 100;
    val = Math.min(val, max);
    val = Math.max(val, min);
    updateValue((0, _extends3["default"])({}, value, (_extends2 = {}, _extends2[name] = val, _extends2)));
    e.target.value = '';
  }, [updateValue, value]);

  var _usePrice = (0, _lib.usePrice)({
    price: {
      centAmount: value.from,
      fractionDigits: 2,
      currencyCode: 'BGN' // We need useInterfaceConfig, pls

    }
  }),
      from = _usePrice.price;

  var _usePrice2 = (0, _lib.usePrice)({
    price: {
      centAmount: value.to,
      fractionDigits: 2,
      currencyCode: 'BGN' // We need useInterfaceConfig, pls

    }
  }),
      to = _usePrice2.price;

  return /*#__PURE__*/_react["default"].createElement(_index.FilterWrapper, {
    filterName: data.name
  }, /*#__PURE__*/_react["default"].createElement(PriceRangeFilterWrapper, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "row row-cols-2 mb-4 pb-3"
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_Common.Input, {
    type: "number",
    pattern: "\\d*",
    step: 5,
    min: min,
    max: to.value,
    placeholder: from.displayValue,
    onBlur: function onBlur(e) {
      return onChange('from', e);
    }
  }))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_Common.Input, {
    type: "number",
    pattern: "\\d*",
    step: 5,
    min: from.value,
    max: max,
    placeholder: to.displayValue,
    onBlur: function onBlur(e) {
      return onChange('to', e);
    }
  })))), /*#__PURE__*/_react["default"].createElement(_lib.RangeSliderInput, {
    defaultValue: {
      left: Math.max(+value.from, min),
      right: Math.min(+value.to, max)
    },
    onChange: function onChange(val) {
      return updateValue({
        from: val.left,
        to: val.right
      });
    },
    min: min,
    max: max,
    step: max - min >= 10000 ? 500 : 100
  })));
};

exports.SlideFilter = SlideFilter;

var PriceRangeFilterWrapper = _styledComponents["default"].div.attrs({
  className: 'pb-3'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var InputWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n\n  & input {\n    padding-right: 3rem !important;\n    -webkit-appearance: textfield !important;\n    -moz-appearance: textfield !important;\n    appearance: textfield !important;\n  }\n"])));

var Currency = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.3rem;\n  font-weight: bold;\n  color: ", ";\n\n  position: absolute;\n\n  top: 50%;\n  right: 0.8rem;\n  transform: translateY(-50%);\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.grey;
});
//# sourceMappingURL=index.js.map