import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _extends from "@babel/runtime/helpers/extends";

var _templateObject, _templateObject2, _templateObject3;

import React, { useCallback } from 'react';
import styled from 'styled-components';
import { RangeSliderInput, usePrice, useSlideFilter } from '@sentecacommerce-theme/lib';
import { FilterWrapper } from '../index';
import { Input } from '../../../../../Common';
export var SlideFilter = (_ref) => {
  var {
    data,
    labels
  } = _ref;
  var raw = data.raw;
  var {
    min,
    max
  } = raw.result || {};
  var {
    value,
    updateValue
  } = useSlideFilter(data.raw.name, min, max);
  var onChange = useCallback((name, e) => {
    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(_extends({}, value, {
      [name]: val
    }));
    e.target.value = '';
  }, [updateValue, value]);
  var {
    price: from
  } = usePrice({
    price: {
      centAmount: value.from,
      fractionDigits: 2,
      currencyCode: 'BGN' // We need useInterfaceConfig, pls

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

    }
  });
  return /*#__PURE__*/React.createElement(FilterWrapper, {
    filterName: data.name
  }, /*#__PURE__*/React.createElement(PriceRangeFilterWrapper, null, /*#__PURE__*/React.createElement("div", {
    className: "row row-cols-2 mb-4 pb-3"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputWrapper, null, /*#__PURE__*/React.createElement(Input, {
    type: "number",
    pattern: "\\d*",
    step: 5,
    min: min,
    max: to.value,
    placeholder: from.displayValue,
    onBlur: e => onChange('from', e)
  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputWrapper, null, /*#__PURE__*/React.createElement(Input, {
    type: "number",
    pattern: "\\d*",
    step: 5,
    min: from.value,
    max: max,
    placeholder: to.displayValue,
    onBlur: e => onChange('to', e)
  })))), /*#__PURE__*/React.createElement(RangeSliderInput, {
    defaultValue: {
      left: Math.max(+value.from, min),
      right: Math.min(+value.to, max)
    },
    onChange: val => updateValue({
      from: val.left,
      to: val.right
    }),
    min: min,
    max: max,
    step: max - min >= 10000 ? 500 : 100
  })));
};
var PriceRangeFilterWrapper = styled.div.attrs({
  className: 'pb-3'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var InputWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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 = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.grey;
});
//# sourceMappingURL=index.js.map