import { SearchOutlined } from '@ant-design/icons';
import { ArrowChevronUp16SecondaryIcon, ArrowChevronUp16BlueIcon, ArrowChevronDown16SecondaryIcon, ArrowChevronDown16BlueIcon, XmarkCloseCircleFill16TertiaryIcon, XmarkCloseCircleFill16SecondaryIcon } from '@cloudtower/icons-react';
import { cx } from '@linaria/core';
import Icon from '../Icon/index.js';
import Input from '../Input/index.js';
import Tooltip from '../Tooltip/index.js';
import { Typo } from '../Typo/index.js';
import useParrotTranslation from '../../hooks/useParrotTranslation.js';
import _ from 'lodash';
import React__default, { useState, useCallback, useEffect } from '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] = useState(0);
  const [value, setValue] = useState(props.value || "");
  const {
    t
  } = useParrotTranslation();
  const onSearch = _.debounce(onChange, debounceWait);
  const isNoMatch = total === 0;
  const current = externalCurrent !== void 0 ? externalCurrent : internalCurrent;
  const setCurrent = useCallback(newCurrent => {
    if (externalCurrent === void 0) {
      setInternalCurrent(newCurrent);
    }
  }, [externalCurrent]);
  const next = 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 = 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.createElement(React__default.Fragment, null, typeof total === "number" ? /* @__PURE__ */React__default.createElement("span", {
    className: cx(Typo.Label.l4_regular, "counter-text", CountTextStyle)
  }, current, "/", total) : null, /* @__PURE__ */React__default.createElement("span", {
    className: IconContainerStyle
  }, isNoMatch ? /* @__PURE__ */React__default.createElement(Icon, {
    className: DisabledIconStyle,
    src: ArrowChevronUp16SecondaryIcon,
    style: {
      opacity: 0.5
    }
  }) : /* @__PURE__ */React__default.createElement(Tooltip, {
    title: t("components.prev")
  }, /* @__PURE__ */React__default.createElement(Icon, {
    src: prefixIcon != null ? prefixIcon : ArrowChevronUp16SecondaryIcon,
    hoverSrc: prefixHoverIcon != null ? prefixHoverIcon : ArrowChevronUp16BlueIcon,
    onClick: prev
  })), isNoMatch ? /* @__PURE__ */React__default.createElement(Icon, {
    className: DisabledIconStyle,
    src: ArrowChevronDown16SecondaryIcon,
    style: {
      opacity: 0.5
    }
  }) : /* @__PURE__ */React__default.createElement(Tooltip, {
    title: t("components.next")
  }, /* @__PURE__ */React__default.createElement(Icon, {
    src: nextIcon != null ? nextIcon : ArrowChevronDown16SecondaryIcon,
    hoverSrc: nextHoverIcon != null ? nextHoverIcon : ArrowChevronDown16BlueIcon,
    onClick: next
  })), /* @__PURE__ */React__default.createElement(Tooltip, {
    title: t("components.clear")
  }, /* @__PURE__ */React__default.createElement(Icon, {
    src: clearIcon != null ? clearIcon : XmarkCloseCircleFill16TertiaryIcon,
    hoverSrc: clearHoverIcon != null ? clearHoverIcon : XmarkCloseCircleFill16SecondaryIcon,
    onClick: () => {
      onSearch("");
      setValue("");
    }
  })))) : null;
  useEffect(() => {
    setValue(props.value || "");
  }, [props.value]);
  useEffect(() => {
    if (externalCurrent === void 0) {
      setCurrent(total ? 1 : 0);
    }
  }, [value, total, externalCurrent, setCurrent]);
  return /* @__PURE__ */React__default.createElement(Input, __spreadProps(__spreadValues({
    style: {
      width: width != null ? width : 276
    },
    prefix: searchIcon ? /* @__PURE__ */React__default.createElement(Icon, {
      src: searchIcon
    }) : /* @__PURE__ */React__default.createElement(SearchOutlined, null),
    suffix,
    onChange: e => {
      const newValue = e.target.value;
      onSearch(newValue);
      setValue(newValue);
    },
    onPressEnter: next,
    value
  }, restProps), {
    className: cx(InputStyle, restProps.className)
  }));
};
var SearchInput$1 = SearchInput;

export { SearchInput$1 as default };
