"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useTranslations } from "next-intl";
import { Button } from "../../ui/button.js";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "../../ui/select.js";
import { sel } from "../../../lib/test/index.js";
function Filters({ filters, onFiltersChange, registeredActionTypes }) {
  const t = useTranslations("devtools.scheduledActions");
  const handleStatusChange = (value) => {
    onFiltersChange({
      ...filters,
      status: value === "all" ? void 0 : value
    });
  };
  const handleActionTypeChange = (value) => {
    onFiltersChange({
      ...filters,
      actionType: value === "all" ? void 0 : value
    });
  };
  const handleReset = () => {
    onFiltersChange({});
  };
  const hasActiveFilters = filters.status || filters.actionType;
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4 mb-6", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-muted-foreground", children: t("filters.status") }),
      /* @__PURE__ */ jsxs(
        Select,
        {
          value: filters.status || "all",
          onValueChange: handleStatusChange,
          children: [
            /* @__PURE__ */ jsx(
              SelectTrigger,
              {
                className: "w-[180px]",
                "data-cy": sel("devtools.scheduledActions.filterStatus"),
                children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("filters.allStatuses") })
              }
            ),
            /* @__PURE__ */ jsxs(SelectContent, { children: [
              /* @__PURE__ */ jsx(SelectItem, { value: "all", children: t("filters.allStatuses") }),
              /* @__PURE__ */ jsx(SelectItem, { value: "pending", children: t("status.pending") }),
              /* @__PURE__ */ jsx(SelectItem, { value: "running", children: t("status.running") }),
              /* @__PURE__ */ jsx(SelectItem, { value: "completed", children: t("status.completed") }),
              /* @__PURE__ */ jsx(SelectItem, { value: "failed", children: t("status.failed") })
            ] })
          ]
        }
      )
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-muted-foreground", children: t("filters.actionType") }),
      /* @__PURE__ */ jsxs(
        Select,
        {
          value: filters.actionType || "all",
          onValueChange: handleActionTypeChange,
          children: [
            /* @__PURE__ */ jsx(
              SelectTrigger,
              {
                className: "w-[200px]",
                "data-cy": sel("devtools.scheduledActions.filterType"),
                children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("filters.allTypes") })
              }
            ),
            /* @__PURE__ */ jsxs(SelectContent, { children: [
              /* @__PURE__ */ jsx(SelectItem, { value: "all", children: t("filters.allTypes") }),
              registeredActionTypes.map((type) => /* @__PURE__ */ jsx(SelectItem, { value: type, children: type }, type))
            ] })
          ]
        }
      )
    ] }),
    hasActiveFilters && /* @__PURE__ */ jsx("div", { className: "flex items-end", children: /* @__PURE__ */ jsx(
      Button,
      {
        variant: "outline",
        onClick: handleReset,
        "data-cy": sel("devtools.scheduledActions.filterReset"),
        children: t("filters.reset")
      }
    ) })
  ] });
}
export {
  Filters
};
