import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { CONFIG } from './config.mjs';
import { Button } from '../../../../button.mjs';
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../../../dropdown-menu.mjs';
import { MoreVertical } from 'lucide-react';
import { useMemo, useCallback } from 'react';

const EMPTY_OBJECT = {};
function ClassNameGroupControl({
  groupConfig,
  group,
  state,
  handleStateChange,
  handleGroupKeySelect,
  selectedKey
}) {
  const spreadProps = useMemo(
    () => "multiple" in groupConfig ? { multiple: groupConfig.multiple } : EMPTY_OBJECT,
    [groupConfig]
  );
  const handleChange = useCallback(
    (value) => handleStateChange(selectedKey, value),
    [handleStateChange, selectedKey]
  );
  const handleDropdownClick = useCallback(
    (key) => () => handleGroupKeySelect(group.label, key),
    [handleGroupKeySelect, group.label]
  );
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: group.label }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-row", children: [
      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
        groupConfig.component,
        {
          ...groupConfig,
          ...spreadProps,
          hideLabel: true,
          value: state[selectedKey],
          onChange: handleChange
        }
      ) }),
      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", className: "text-xs w-6 px-1 py-1", children: /* @__PURE__ */ jsx(MoreVertical, { className: "!size-4" }) }) }),
        /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: group.keys.map((key) => /* @__PURE__ */ jsx(
          DropdownMenuItem,
          {
            onClick: handleDropdownClick(String(key)),
            className: selectedKey === String(key) ? "bg-secondary-foreground/10" : "",
            children: CONFIG[String(key)]?.label || String(key)
          },
          String(key)
        )) })
      ] })
    ] })
  ] });
}

export { ClassNameGroupControl };
