import { cx } from '@linaria/core';
import Input from '../../core/Input/index.js';
import { Typo } from '../../core/Typo/index.js';
import useParrotTranslation from '../../hooks/useParrotTranslation.js';
import React__default, { useRef, useState } from 'react';
import Highlighter from 'react-highlight-words';
import { BASIC_RELATIVE_TIME_CONFIG, getDateText } from './common.js';
import { RelativeTimeStyle } from './DateRangePicker.style.js';

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

export { RelativeTime$1 as default };
