"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { memo, useMemo, useCallback } from "react";
import { useTranslations } from "next-intl";
import { UploadIcon, SearchIcon, GridIcon, ListIcon } from "lucide-react";
import { Button } from "../ui/button.js";
import { Input } from "../ui/input.js";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "../ui/select.js";
import { cn } from "../../lib/utils/index.js";
import { sel } from "../../lib/selectors/index.js";
const MediaToolbar = memo(function MediaToolbar2({
  onUploadClick,
  searchQuery,
  onSearchChange,
  typeFilter,
  onTypeFilterChange,
  sortBy = "createdAt",
  sortDir = "desc",
  onSortChange,
  viewMode,
  onViewModeChange,
  className
}) {
  const t = useTranslations("media");
  const sortOptions = useMemo(() => [
    { value: "createdAt:desc", label: t("toolbar.sort.newest"), orderBy: "createdAt", orderDir: "desc" },
    { value: "createdAt:asc", label: t("toolbar.sort.oldest"), orderBy: "createdAt", orderDir: "asc" },
    { value: "filename:asc", label: t("toolbar.sort.nameAsc"), orderBy: "filename", orderDir: "asc" },
    { value: "filename:desc", label: t("toolbar.sort.nameDesc"), orderBy: "filename", orderDir: "desc" },
    { value: "fileSize:desc", label: t("toolbar.sort.sizeDesc"), orderBy: "fileSize", orderDir: "desc" },
    { value: "fileSize:asc", label: t("toolbar.sort.sizeAsc"), orderBy: "fileSize", orderDir: "asc" }
  ], [t]);
  const currentSortValue = `${sortBy}:${sortDir}`;
  const handleSortChange = useCallback((value) => {
    const option = sortOptions.find((opt) => opt.value === value);
    if (option) {
      onSortChange(option.orderBy, option.orderDir);
    }
  }, [sortOptions, onSortChange]);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      "data-cy": sel("media.toolbar.container"),
      className: cn("flex flex-col sm:flex-row gap-2 sm:items-center", className),
      children: [
        onUploadClick && /* @__PURE__ */ jsxs(
          Button,
          {
            "data-cy": sel("media.toolbar.uploadBtn"),
            onClick: onUploadClick,
            className: "shrink-0",
            children: [
              /* @__PURE__ */ jsx(UploadIcon, { className: "mr-2 h-4 w-4" }),
              t("toolbar.upload")
            ]
          }
        ),
        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-[200px]", children: [
          /* @__PURE__ */ jsx(SearchIcon, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" }),
          /* @__PURE__ */ jsx(
            Input,
            {
              "data-cy": sel("media.toolbar.searchInput"),
              type: "text",
              placeholder: t("toolbar.search"),
              value: searchQuery,
              onChange: (e) => onSearchChange(e.target.value),
              className: "pl-9"
            }
          )
        ] }),
        /* @__PURE__ */ jsxs(Select, { value: typeFilter, onValueChange: (value) => onTypeFilterChange(value), children: [
          /* @__PURE__ */ jsx(
            SelectTrigger,
            {
              "data-cy": sel("media.toolbar.typeFilter"),
              className: "w-full sm:w-[150px]",
              children: /* @__PURE__ */ jsx(SelectValue, {})
            }
          ),
          /* @__PURE__ */ jsxs(SelectContent, { children: [
            /* @__PURE__ */ jsx(SelectItem, { value: "all", children: t("toolbar.typeFilter.all") }),
            /* @__PURE__ */ jsx(SelectItem, { value: "image", children: t("toolbar.typeFilter.images") }),
            /* @__PURE__ */ jsx(SelectItem, { value: "video", children: t("toolbar.typeFilter.videos") })
          ] })
        ] }),
        /* @__PURE__ */ jsxs(Select, { value: currentSortValue, onValueChange: handleSortChange, children: [
          /* @__PURE__ */ jsx(
            SelectTrigger,
            {
              "data-cy": sel("media.toolbar.sortSelect"),
              className: "w-full sm:w-[180px]",
              children: /* @__PURE__ */ jsx(SelectValue, {})
            }
          ),
          /* @__PURE__ */ jsx(SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "flex gap-1 shrink-0", children: [
          /* @__PURE__ */ jsx(
            Button,
            {
              "data-cy": sel("media.toolbar.viewToggle.grid"),
              variant: viewMode === "grid" ? "default" : "outline",
              size: "icon",
              onClick: () => onViewModeChange("grid"),
              "aria-label": t("toolbar.viewGrid"),
              title: t("toolbar.viewGrid"),
              children: /* @__PURE__ */ jsx(GridIcon, { className: "h-4 w-4" })
            }
          ),
          /* @__PURE__ */ jsx(
            Button,
            {
              "data-cy": sel("media.toolbar.viewToggle.list"),
              variant: viewMode === "list" ? "default" : "outline",
              size: "icon",
              onClick: () => onViewModeChange("list"),
              "aria-label": t("toolbar.viewList"),
              title: t("toolbar.viewList"),
              children: /* @__PURE__ */ jsx(ListIcon, { className: "h-4 w-4" })
            }
          )
        ] })
      ]
    }
  );
});
export {
  MediaToolbar
};
