import "react";
import { Icons } from "../components/Icons/Icons.js";
import { jsxs, jsx } from "../node_modules/.pnpm/@emotion_react@11.10.4_q4mq7tnhdumujvomvw24zx33y4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
const Aside = ({
  icon,
  label,
  data = [],
  useSearchParams
}) => {
  return /* @__PURE__ */ jsxs("div", {
    className: "relative flex flex-col p-4 bg-white rounded-lg shadow",
    children: [/* @__PURE__ */ jsx(H2, {
      icon,
      label,
      className: "text-base font-bold"
    }), data && data.map((item, index) => {
      return /* @__PURE__ */ jsxs("div", {
        className: "",
        children: [/* @__PURE__ */ jsx(H2, {
          icon: item.icon || "base",
          label: item.label,
          className: "text-base font-bold"
        }), /* @__PURE__ */ jsx("div", {
          className: "flex flex-col justify-between flex-1 mt-3 space-y-2",
          children: item.items && item.items.map((item2, index2) => {
            return /* @__PURE__ */ jsx(SearchCheckbox, {
              ...item2,
              useSearchParams
            }, `item-${index2}`);
          })
        })]
      }, `data-${index}`);
    })]
  });
};
const SearchCheckbox = (props) => {
  const {
    label,
    name,
    value,
    icon,
    tag,
    type,
    useSearchParams
  } = props;
  if (type === "line") {
    return /* @__PURE__ */ jsx("hr", {
      className: "!my-4 border-gray-200 dark:border-gray-600 mx-4"
    });
  }
  if (type === "title") {
    return /* @__PURE__ */ jsx(H2, {
      icon,
      label,
      className: ""
    });
  }
  let params = new URLSearchParams({
    [name]: typeof value === "object" ? JSON.stringify(value) : value
  });
  const [searchParams, setSearchParams] = useSearchParams();
  const getParams = searchParams.get(name || "");
  const isActive = getParams === JSON.stringify(value) ? true : false;
  const onClick = (e) => {
    e.stopPropagation();
    setSearchParams(params);
  };
  return /* @__PURE__ */ jsxs("div", {
    className: `${isActive ? "bg-sky-50" : ""} hover:bg-sky-50 supports-backdrop-blur:bg-white/95 backdrop-blur cursor-pointer relative flex items-center px-4 py-2 rounded-md dark:bg-slate-500 dark:text-gray-200`,
    children: [/* @__PURE__ */ jsx("input", {
      checked: isActive,
      onChange: (e) => onClick(e),
      id: `filter-${params}`,
      name,
      value: params,
      type: "checkbox",
      className: "w-4 h-4 text-indigo-600 border-gray-300 rounded sr-only focus:ring-indigo-500"
    }), /* @__PURE__ */ jsxs("label", {
      htmlFor: `filter-${params}`,
      className: "flex-1 min-w-0 text-gray-500 cursor-pointer",
      children: [icon && typeof icon === "string" ? /* @__PURE__ */ jsx(Icons, {
        name: icon,
        className: `${isActive ? "text-sky-600" : "text-gray-400"} inline-flex w-4 h-4`
      }) : /* @__PURE__ */ jsx("span", {
        className: `${isActive ? "text-sky-600" : "text-gray-400"} inline-flex w-4 h-4`,
        children: icon
      }), /* @__PURE__ */ jsx("span", {
        className: `${isActive ? "text-sky-600 font-bold" : "text-gray-700 "} ml-3`,
        children: label
      }), tag && /* @__PURE__ */ jsx("span", {
        className: "inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300",
        children: tag
      })]
    })]
  });
};
const H2 = ({
  icon,
  label,
  className
}) => {
  if (!label) {
    return null;
  }
  return /* @__PURE__ */ jsxs("h2", {
    className: `text-gray-400 uppercase ${className}`,
    children: [icon && typeof icon === "string" ? /* @__PURE__ */ jsx(Icons, {
      name: icon,
      className: `text-gray-300 inline-flex w-6 h-6 mr-4`
    }) : /* @__PURE__ */ jsx("span", {
      className: `text-gray-300 inline-flex w-6 h-6 mr-4`,
      children: icon
    }), label]
  });
};
export {
  Aside
};
//# sourceMappingURL=Aside.js.map
