"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { memo, useState, useMemo, useCallback } from "react";
import { useTranslations } from "next-intl";
import { TagIcon, XIcon } from "lucide-react";
import { Badge } from "../ui/badge.js";
import { Button } from "../ui/button.js";
import {
  Popover,
  PopoverContent,
  PopoverTrigger
} from "../ui/popover.js";
import { cn } from "../../lib/utils/index.js";
import { sel } from "../../lib/selectors/index.js";
import { useMediaTags } from "../../hooks/useMedia.js";
const MediaTagFilter = memo(function MediaTagFilter2({
  selectedTagIds,
  onTagsChange,
  className
}) {
  const t = useTranslations("media");
  const { data: tags = [], isLoading } = useMediaTags();
  const [isOpen, setIsOpen] = useState(false);
  const selectedIdSet = useMemo(() => new Set(selectedTagIds), [selectedTagIds]);
  const selectedTags = useMemo(
    () => tags.filter((tag) => selectedIdSet.has(tag.id)),
    [tags, selectedIdSet]
  );
  const toggleTag = useCallback((tagId) => {
    if (selectedIdSet.has(tagId)) {
      onTagsChange(selectedTagIds.filter((id) => id !== tagId));
    } else {
      onTagsChange([...selectedTagIds, tagId]);
    }
  }, [selectedIdSet, selectedTagIds, onTagsChange]);
  const clearTags = useCallback(() => {
    onTagsChange([]);
  }, [onTagsChange]);
  if (isLoading) return null;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      "data-cy": sel("media.tagFilter.container"),
      className: cn("flex items-center gap-2 flex-wrap", className),
      children: [
        /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
            Button,
            {
              "data-cy": sel("media.tagFilter.trigger"),
              variant: "outline",
              size: "sm",
              className: "h-8 gap-1",
              children: [
                /* @__PURE__ */ jsx(TagIcon, { className: "h-3.5 w-3.5" }),
                t("dashboard.tags"),
                selectedTagIds.length > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-1 h-5 px-1 text-xs", children: selectedTagIds.length })
              ]
            }
          ) }),
          /* @__PURE__ */ jsx(
            PopoverContent,
            {
              "data-cy": sel("media.tagFilter.popover"),
              className: "w-64 p-3",
              align: "start",
              children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("dashboard.filterByTag") }),
                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: tags.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("dashboard.noTags") }) : tags.map((tag) => {
                  const isSelected = selectedIdSet.has(tag.id);
                  return /* @__PURE__ */ jsx(
                    Badge,
                    {
                      "data-cy": sel("media.tagFilter.tag", { id: tag.id }),
                      variant: isSelected ? "default" : "outline",
                      className: cn(
                        "cursor-pointer transition-colors",
                        isSelected && tag.color && "border-transparent"
                      ),
                      style: isSelected && tag.color ? { backgroundColor: tag.color, color: "#fff" } : void 0,
                      onClick: () => toggleTag(tag.id),
                      children: tag.name
                    },
                    tag.id
                  );
                }) }),
                selectedTagIds.length > 0 && /* @__PURE__ */ jsx(
                  Button,
                  {
                    variant: "ghost",
                    size: "sm",
                    className: "w-full h-7 text-xs",
                    onClick: clearTags,
                    children: t("dashboard.clearSelection")
                  }
                )
              ] })
            }
          )
        ] }),
        selectedTags.map((tag) => /* @__PURE__ */ jsxs(
          Badge,
          {
            "data-cy": sel("media.tagFilter.activeTag", { id: tag.id }),
            variant: "secondary",
            className: "gap-1 cursor-pointer hover:bg-destructive/20",
            style: tag.color ? { borderColor: tag.color } : void 0,
            onClick: () => toggleTag(tag.id),
            children: [
              tag.name,
              /* @__PURE__ */ jsx(XIcon, { className: "h-3 w-3" })
            ]
          },
          tag.id
        ))
      ]
    }
  );
});
export {
  MediaTagFilter
};
