'use strict';

var core = require('@linaria/core');
var index = require('../../core/Input/index.js');
var index$1 = require('../../core/Typo/index.js');
var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
var React = require('react');
var Highlighter = require('react-highlight-words');
var common = require('./common.js');
var DateRangePicker_style = require('./DateRangePicker.style.js');

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

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

const HighlightKeywordStyle = "E_h1ol2wl7";
const RelativeTime = props => {
  const {
    value,
    config,
    search,
    onChange
  } = props;
  const {
    t
  } = useParrotTranslation();
  const configRef = React.useRef(config || common.BASIC_RELATIVE_TIME_CONFIG);
  const [keyword, setKeyword] = React.useState("");
  const configList = configRef.current.filter(config2 => {
    const text = common.getDateText(config2, t);
    return text.indexOf(keyword) > -1;
  });
  return /* @__PURE__ */React__default.default.createElement(DateRangePicker_style.RelativeTimeStyle.Wrapper, null, search ? /* @__PURE__ */React__default.default.createElement(index, {
    value: keyword,
    allowClear: true,
    placeholder: t("components.search_relative_time_placeholder"),
    onChange: event => setKeyword(event.target.value)
  }) : null, /* @__PURE__ */React__default.default.createElement("ul", {
    className: core.cx("past-time-list", !search && "no-search")
  }, configList.map((config2, index) => {
    const selected = config2.unit === (value == null ? void 0 : value.unit) && config2.value === (value == null ? void 0 : value.value);
    const text = common.getDateText(config2, t);
    return /* @__PURE__ */React__default.default.createElement("li", {
      key: index,
      className: core.cx(index$1.Typo.Label.l2_regular, selected && "selected", config2.disabled && "disabled"),
      onClick: () => onChange == null ? void 0 : onChange(config2)
    }, /* @__PURE__ */React__default.default.createElement(Highlighter__default.default, {
      highlightClassName: core.cx(HighlightKeywordStyle, "highlight"),
      searchWords: [keyword],
      autoEscape: true,
      textToHighlight: text
    }));
  })));
};
var RelativeTime$1 = RelativeTime;

module.exports = RelativeTime$1;
