import { jsxs as f, jsx as e } from "react/jsx-runtime";
import { useState as x, useRef as I } from "react";
import o from "prop-types";
import { Tooltip as N, IconButton as w, TextField as g } from "@mui/material";
import { Search as v, Clear as R } from "@mui/icons-material";
import q from "clsx";
import E from "lodash/noop";
import { useDatatableContext as B } from "./DatatableContext.js";
import { styled as D } from "../Theme/index.js";
function M({
  search: t = "",
  options: s,
  searchText: a = "",
  searchTextUpdate: c,
  searchClose: C,
  onSearchOpen: d = E
}) {
  const { searchOpen: T, searchPlaceholder: y, searchAlwaysOpen: r } = s, [k, h] = x(!!a || T || !1), [p, m] = x(a), u = I(null), { loading: b } = B(), { searchDebounceTime: n } = s, i = r || k, S = () => {
    h(!0), d(!0);
  }, F = (j) => {
    const { value: l } = j.currentTarget;
    n ? (clearTimeout(u.current), m(l), u.current = setTimeout(() => {
      c(l);
    }, n)) : c(l);
  }, $ = () => {
    h(!1), C(), m(""), d(!1);
  };
  return /* @__PURE__ */ f(
    O,
    {
      className: q({
        "search-always-open": r
      }),
      children: [
        i ? /* @__PURE__ */ e("div", { className: "toolbar-search-icon-placeholder", children: /* @__PURE__ */ e(v, {}) }) : /* @__PURE__ */ e(N, { title: t, disableFocusListener: !0, children: /* @__PURE__ */ e(
          w,
          {
            "aria-label": t,
            "data-testid": `${t}-iconButton`,
            disabled: s.search === "disabled",
            onClick: S,
            children: /* @__PURE__ */ e(v, {})
          }
        ) }),
        /* @__PURE__ */ f("div", { className: `toolbar-search-area ${i ? "toolbar-btn-show" : ""}`, children: [
          i && !b && /* @__PURE__ */ e(
            g,
            {
              variant: "standard",
              spacing: 2,
              onChange: F,
              value: n ? p : a,
              placeholder: y || "",
              autoFocus: !r
            }
          ),
          b && /* @__PURE__ */ e(
            g,
            {
              disabled: !0,
              variant: "standard",
              spacing: 2,
              value: n ? p : a
            }
          )
        ] }),
        !r && /* @__PURE__ */ e("div", { className: `toolbar-search-close ${i ? "toolbar-btn-show" : ""}`, children: /* @__PURE__ */ e(w, { onClick: $, "aria-label": "click to close the search box", children: /* @__PURE__ */ e(R, {}) }) })
      ]
    }
  );
}
M.propTypes = {
  search: o.string,
  searchText: o.string,
  onSearchOpen: o.func,
  options: o.object.isRequired,
  searchTextUpdate: o.func.isRequired,
  searchClose: o.func.isRequired
};
const O = D("div")`
  display: flex;
  align-items: center;
  .toolbar-search-area {
    width: 0;
    transition: all ease 0.3s;
    overflow: hidden;
    .MuiFormControl-root {
      width: inherit;
      margin: 0 12px;
    }
    &.toolbar-btn-show {
      width: 260px;
      padding-left: 8px;

      ${(t) => t.theme.breakpoints.down("md")} {
        width: 200px;
      }

      ${(t) => t.theme.breakpoints.down("sm")} {
        width: 180px;
      }
      &.small-textfield {
        width: 200px;
      }
    }
  }
  .toolbar-search-close {
    width: 0;
    transition: all ease 0.3s;
    overflow: hidden;
    &.toolbar-btn-show {
      width: 40px;
    }
  }
  .toolbar-search-icon-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
  }
  &.search-always-open {
    .MuiFormControl-root {
      margin: 0 12px 0 0;
    }
    .toolbar-btn-show {
      padding-left: 0;
    }
  }
`;
export {
  M as default
};
