"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { useState, useRef, useEffect } from "react";
import { useDebounce } from "../../hooks/useDebounce.js";
import { FontSize } from "../../tokens/FontSize.js";
import { buildTransition } from "../../tokens/utils.js";
import { FontFamily } from "../../tokens/FontFamily.js";
import { Icon } from "../../atoms/Icon/Icon.js";
import { Button } from "../Button/Button.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Flex } from "../../atoms/Flex/Flex.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
const Search = ({
  defaultValue = "",
  setSearchText,
  onChange,
  placeholder,
  debounceDelayMs = 300
}) => {
  const [search, setSearch] = useState(defaultValue);
  const debounced = useDebounce(search, debounceDelayMs);
  const setSearchTextRef = useRef(setSearchText);
  setSearchTextRef.current = setSearchText;
  useEffect(() => {
    if (setSearchTextRef.current != null) {
      setSearchTextRef.current(debounced);
    }
  }, [debounced]);
  return /* @__PURE__ */ jsxs(SearchContainer, { onClick: (event) => event.stopPropagation(), children: [
    /* @__PURE__ */ jsx(
      SearchInput,
      {
        placeholder,
        value: search,
        name: "search",
        className: "search-field",
        onChange: (event) => {
          setSearch(event.target.value || "");
          onChange == null ? void 0 : onChange(event.target.value || "");
        },
        style: {
          width: search ? `${search.length * 10}px` : "100%"
        }
      }
    ),
    search.length > 0 ? /* @__PURE__ */ jsx(
      SearchResetButton,
      {
        className: "search-close",
        onClick: () => {
          setSearch("");
          onChange == null ? void 0 : onChange("");
        }
      }
    ) : null
  ] });
};
function SearchResetButton(props) {
  return /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "small", sx: { height: "24px" }, ...props, children: /* @__PURE__ */ jsx(Icon.Close, { color: "White88", size: "10px" }) });
}
Search.ResetButton = SearchResetButton;
function SearchInput(props) {
  return /* @__PURE__ */ jsx(
    "input",
    {
      type: "search",
      enterKeyHint: "search",
      ...props,
      sx: {
        color: "White88",
        background: "inherit",
        border: "none",
        fontSize: FontSize["16px"],
        textDecoration: "none",
        fontFamily: FontFamily.DEFAULT,
        transition: buildTransition("OPACITY", "200ms", "EASE_IN"),
        overflowWrap: "break-word",
        appearance: "none",
        borderRadius: "0",
        minWidth: "120px",
        "&:active, &:focus": {
          outline: "none"
        },
        "&::placeholder": {
          color: "White48",
          fontSize: FontSize["14px"]
        },
        "::-webkit-search-cancel-button": {
          display: "none"
        }
      }
    }
  );
}
Search.Input = SearchInput;
function SearchContainer(props) {
  return /* @__PURE__ */ jsx(
    "label",
    {
      sx: {
        borderRadius: BorderRadius.M,
        fontSize: FontSize["12px"],
        py: Spacing["4px"],
        pl: Spacing["12px"],
        transition: buildTransition("OPACITY", "200ms", "EASE_IN_OUT"),
        mr: [Spacing["8px"], 0],
        display: "block"
      },
      ...props,
      children: /* @__PURE__ */ jsxs(
        Flex,
        {
          align: "center",
          sx: {
            color: "White48",
            columnGap: Spacing["8px"],
            "& [data-placeholder]:empty:before": {
              content: "attr(data-placeholder)",
              color: "White48"
            }
          },
          onClick: (event) => event.stopPropagation(),
          children: [
            /* @__PURE__ */ jsx(Icon.Search, { color: "White88" }),
            props.children
          ]
        }
      )
    }
  );
}
Search.Container = SearchContainer;
export {
  Search
};
