"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const reactHookForm = require("react-hook-form");
const useURLQueryState = require("../../hooks/useURLQueryState.cjs");
const index$1 = require("../../icons/index.cjs");
;/* empty css                                                                                                                                                                                        */
;/* empty css                                                                                                                                                                                         */
;/* empty css                                                                                                                                                                                                 */
;/* empty css                                                                                                                                                                                            */
;/* empty css                                                                                                                                                                                            */
const index = require("../../primitive/Button/index.cjs");
const styles = require("../../utils/styles.cjs");
const DatePicker = require("../Form/DatePicker.cjs");
const FormTimeRangePicker = require("../Form/FormTimeRangePicker.cjs");
const Box = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.cjs");
const Form = require("../Form/Form.cjs");
const useDebouncedValue = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-debounced-value/use-debounced-value.cjs");
const MultiSelect = require("../Form/MultiSelect.cjs");
const Select = require("../Form/Select.cjs");
const TextInput = require("../Form/TextInput.cjs");
const SX_Y_MID = { display: "flex", alignItems: "center" };
const FORM_ITEM_SX_BASE = { minWidth: "160px" };
function FormItemRender(props) {
  const {
    data: { name, placeholder, type, sx },
    onSubmit,
    defaultValue,
    resetSeed
  } = props;
  const [keyword, setKeyword] = React.useState(defaultValue);
  const [debouncedKeyword] = useDebouncedValue.useDebouncedValue(keyword, 800);
  React.useEffect(() => {
    if (resetSeed > 0) {
      setKeyword(defaultValue);
    }
  }, [resetSeed]);
  React.useEffect(() => {
    if (type === "text") {
      triggerSubmit();
    }
  }, [debouncedKeyword]);
  const triggerSubmit = () => onSubmit && onSubmit();
  function onKeyDownHandler(e) {
    if (e.key === "Enter") {
      e.preventDefault();
      e.stopPropagation();
      triggerSubmit();
    }
  }
  switch (type) {
    case "text":
      return /* @__PURE__ */ jsxRuntime.jsx(
        TextInput.FormTextInput,
        {
          name,
          value: keyword,
          onChange: (e) => {
            setKeyword(e.target.value);
          },
          placeholder: placeholder ?? "",
          onKeyDown: onKeyDownHandler,
          rightSection: !!keyword && /* @__PURE__ */ jsxRuntime.jsx(
            index$1.IconXClose,
            {
              style: { cursor: "pointer" },
              size: 14,
              onClick: () => {
                setKeyword("");
                props.form.setValue(name, "");
                triggerSubmit();
              }
            }
          ),
          sx: styles.mergeSxList([FORM_ITEM_SX_BASE, sx])
        }
      );
    case "select":
      return /* @__PURE__ */ jsxRuntime.jsx(
        Select.FormSelect,
        {
          data: props.data.data,
          name,
          value: keyword || null,
          placeholder: placeholder ?? "",
          onChange: (val) => {
            setKeyword(val ?? "");
            triggerSubmit();
          },
          clearable: true,
          searchable: true,
          sx: styles.mergeSxList([FORM_ITEM_SX_BASE, sx])
        }
      );
    case "multiselect":
      return /* @__PURE__ */ jsxRuntime.jsx(
        MultiSelect.FormMultiSelect,
        {
          data: props.data.data,
          name,
          value: keyword,
          placeholder: placeholder ?? "",
          onChange: (val) => {
            setKeyword(val ?? []);
            triggerSubmit();
          },
          clearable: true,
          searchable: true,
          sx: styles.mergeSxList([FORM_ITEM_SX_BASE, sx])
        }
      );
    case "datepicker":
      return /* @__PURE__ */ jsxRuntime.jsx(
        DatePicker.FormDatePicker,
        {
          name,
          value: typeof keyword === "string" ? new Date(keyword) : keyword,
          placeholder: placeholder ?? "",
          onChange: (val) => {
            setKeyword(val);
            triggerSubmit();
          },
          clearable: true,
          sx: styles.mergeSxList([FORM_ITEM_SX_BASE, sx])
        }
      );
    case "timerangepicker":
      return /* @__PURE__ */ jsxRuntime.jsx(
        FormTimeRangePicker.FormTimeRangePicker,
        {
          name,
          value: keyword,
          clearable: true,
          placeholder: placeholder ?? "",
          onChange: (val) => {
            setKeyword(val);
            triggerSubmit();
          },
          sx: styles.mergeSxList([FORM_ITEM_SX_BASE, sx])
        }
      );
    default:
      return null;
  }
}
const DEFAULT_FORM_STATE_KEY = "__fs";
function SearchArea(props) {
  const { data, onSubmit, onRefresh, recoverFromURLEnabled, defaultValues, formStateQueryKey, ...rest } = props;
  const [resetSeed, setResetSeed] = React.useState(0);
  const [formState, setFormState] = useURLQueryState.useURLQueryState(formStateQueryKey ?? DEFAULT_FORM_STATE_KEY, defaultValues);
  const state = recoverFromURLEnabled ? formState : defaultValues;
  const form = reactHookForm.useForm({ defaultValues: state });
  const handleSubmit = () => {
    const values = form.getValues();
    onSubmit(values);
    recoverFromURLEnabled && setFormState(values);
  };
  const handleReset = () => {
    setResetSeed(resetSeed + 1);
    form.reset(defaultValues);
    onSubmit(form.getValues());
    recoverFromURLEnabled && setFormState(defaultValues);
  };
  const handleRefresh = () => {
    onRefresh && onRefresh();
  };
  React.useEffect(() => {
    if (recoverFromURLEnabled) {
      handleSubmit();
    }
  }, []);
  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(Form.Form, { onSubmit, ...rest, form, errorMessageProps: { mx: 16 }, withActions: false, children: /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: { display: "flex", gap: 16, flexWrap: "wrap" }, children: [
    data.map((x) => /* @__PURE__ */ jsxRuntime.jsx(
      FormItemRender,
      {
        form,
        data: x,
        onSubmit: handleSubmit,
        defaultValue: state[x.name],
        resetSeed
      },
      x.name
    )),
    /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { sx: SX_Y_MID, children: [
      /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick: handleReset, children: props.clearFiltersText ?? "Clear Filters" }) }),
      onRefresh && /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ml: 16, sx: SX_Y_MID, children: /* @__PURE__ */ jsxRuntime.jsx(index.Button, { variant: "subtle", onClick: handleRefresh, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.IconRefreshCw01, { size: 16 }) }) })
    ] })
  ] }) }) }) });
}
exports.DEFAULT_FORM_STATE_KEY = DEFAULT_FORM_STATE_KEY;
exports.SearchArea = SearchArea;
