'use strict';

var icons = require('@ant-design/icons');
var iconsReact = require('@cloudtower/icons-react');
var core = require('@linaria/core');
var index$1 = require('../Icon/index.js');
var index$3 = require('../Input/index.js');
var index$2 = require('../Tooltip/index.js');
var index = require('../Typo/index.js');
var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
var _ = require('lodash');
var React = require('react');

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

var ___default = /*#__PURE__*/_interopDefault(_);
var React__default = /*#__PURE__*/_interopDefault(React);

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
  enumerable: true,
  configurable: true,
  writable: true,
  value
}) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
    if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
  }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source) if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols) for (var prop of __getOwnPropSymbols(source)) {
    if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) target[prop] = source[prop];
  }
  return target;
};
const InputStyle = "E_i11gg7mj";
const CountTextStyle = "E_cc368xp";
const IconContainerStyle = "E_i11o6xqj";
const DisabledIconStyle = "E_d19ruhdj";
const SearchInput = props => {
  const _a = props,
    {
      onChange,
      debounceWait = 300,
      total = 0,
      onSearchNext,
      onSearchPrev,
      prefixHoverIcon,
      nextHoverIcon,
      clearHoverIcon,
      prefixIcon,
      nextIcon,
      clearIcon,
      width,
      searchIcon,
      current: externalCurrent
    } = _a,
    restProps = __objRest(_a, ["onChange", "debounceWait", "total", "onSearchNext", "onSearchPrev", "prefixHoverIcon", "nextHoverIcon", "clearHoverIcon", "prefixIcon", "nextIcon", "clearIcon", "width", "searchIcon", "current"]);
  const [internalCurrent, setInternalCurrent] = React.useState(0);
  const [value, setValue] = React.useState(props.value || "");
  const {
    t
  } = useParrotTranslation();
  const onSearch = ___default.default.debounce(onChange, debounceWait);
  const isNoMatch = total === 0;
  const current = externalCurrent !== void 0 ? externalCurrent : internalCurrent;
  const setCurrent = React.useCallback(newCurrent => {
    if (externalCurrent === void 0) {
      setInternalCurrent(newCurrent);
    }
  }, [externalCurrent]);
  const next = React.useCallback(() => {
    if (total) {
      const nextCurrent = current + 1 > total ? 1 : current + 1;
      onSearchNext == null ? void 0 : onSearchNext(value, nextCurrent);
      setCurrent(nextCurrent);
    }
  }, [onSearchNext, current, total, value, setCurrent]);
  const prev = React.useCallback(() => {
    if (total) {
      const prevCurrent = current - 1 < 1 ? total : current - 1;
      onSearchPrev == null ? void 0 : onSearchPrev(value, prevCurrent);
      setCurrent(prevCurrent);
    }
  }, [onSearchPrev, current, total, value, setCurrent]);
  const suffix = onSearchNext && onSearchPrev && value ? /* @__PURE__ */React__default.default.createElement(React__default.default.Fragment, null, typeof total === "number" ? /* @__PURE__ */React__default.default.createElement("span", {
    className: core.cx(index.Typo.Label.l4_regular, "counter-text", CountTextStyle)
  }, current, "/", total) : null, /* @__PURE__ */React__default.default.createElement("span", {
    className: IconContainerStyle
  }, isNoMatch ? /* @__PURE__ */React__default.default.createElement(index$1, {
    className: DisabledIconStyle,
    src: iconsReact.ArrowChevronUp16SecondaryIcon,
    style: {
      opacity: 0.5
    }
  }) : /* @__PURE__ */React__default.default.createElement(index$2, {
    title: t("components.prev")
  }, /* @__PURE__ */React__default.default.createElement(index$1, {
    src: prefixIcon != null ? prefixIcon : iconsReact.ArrowChevronUp16SecondaryIcon,
    hoverSrc: prefixHoverIcon != null ? prefixHoverIcon : iconsReact.ArrowChevronUp16BlueIcon,
    onClick: prev
  })), isNoMatch ? /* @__PURE__ */React__default.default.createElement(index$1, {
    className: DisabledIconStyle,
    src: iconsReact.ArrowChevronDown16SecondaryIcon,
    style: {
      opacity: 0.5
    }
  }) : /* @__PURE__ */React__default.default.createElement(index$2, {
    title: t("components.next")
  }, /* @__PURE__ */React__default.default.createElement(index$1, {
    src: nextIcon != null ? nextIcon : iconsReact.ArrowChevronDown16SecondaryIcon,
    hoverSrc: nextHoverIcon != null ? nextHoverIcon : iconsReact.ArrowChevronDown16BlueIcon,
    onClick: next
  })), /* @__PURE__ */React__default.default.createElement(index$2, {
    title: t("components.clear")
  }, /* @__PURE__ */React__default.default.createElement(index$1, {
    src: clearIcon != null ? clearIcon : iconsReact.XmarkCloseCircleFill16TertiaryIcon,
    hoverSrc: clearHoverIcon != null ? clearHoverIcon : iconsReact.XmarkCloseCircleFill16SecondaryIcon,
    onClick: () => {
      onSearch("");
      setValue("");
    }
  })))) : null;
  React.useEffect(() => {
    setValue(props.value || "");
  }, [props.value]);
  React.useEffect(() => {
    if (externalCurrent === void 0) {
      setCurrent(total ? 1 : 0);
    }
  }, [value, total, externalCurrent, setCurrent]);
  return /* @__PURE__ */React__default.default.createElement(index$3, __spreadProps(__spreadValues({
    style: {
      width: width != null ? width : 276
    },
    prefix: searchIcon ? /* @__PURE__ */React__default.default.createElement(index$1, {
      src: searchIcon
    }) : /* @__PURE__ */React__default.default.createElement(icons.SearchOutlined, null),
    suffix,
    onChange: e => {
      const newValue = e.target.value;
      onSearch(newValue);
      setValue(newValue);
    },
    onPressEnter: next,
    value
  }, restProps), {
    className: core.cx(InputStyle, restProps.className)
  }));
};
var SearchInput$1 = SearchInput;

module.exports = SearchInput$1;
