'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const utils = require('../../../../../lib/utils.cjs');
const dropdownMenu = require('../../../../dropdown-menu.cjs');
const tooltip = require('../../../../tooltip.cjs');
const button = require('../../../../button.cjs');
const LucideIcons = require('lucide-react');

function ToggleGroup({
  label,
  options,
  value = null,
  onChange,
  className,
  allowDeselect = true,
  hideLabel = false,
  multiple = false
}) {
  const valueArray = React.useMemo(() => multiple ? Array.isArray(value) ? value : value ? [value] : [] : value, [multiple, value]);
  const getIsSelected = React.useCallback((option) => {
    if (option.dropdown) {
      if (multiple) {
        return option.dropdown.items.some(
          (item) => valueArray.includes(
            typeof item.value === "string" ? item.value : ""
          )
        );
      } else {
        return option.dropdown.items.some(
          (item) => value === (typeof item.value === "string" ? item.value : void 0)
        );
      }
    }
    if (multiple) {
      return valueArray.includes(option.value);
    }
    return value === option.value;
  }, [multiple, valueArray, value]);
  const handleToggleClick = React.useCallback((option) => {
    if (multiple) {
      let newValue = Array.isArray(valueArray) ? [...valueArray] : [];
      if (option.dropdown) {
        const dropdownValues = option.dropdown.items.map(
          (item) => typeof item.value === "string" ? item.value : ""
        );
        const hasAny = dropdownValues.some((v) => newValue.includes(v));
        if (hasAny && allowDeselect) {
          newValue = newValue.filter((v) => !dropdownValues.includes(v));
        } else {
          if (!hasAny && dropdownValues[0]) {
            newValue.push(dropdownValues[0]);
          }
        }
      } else {
        const idx = newValue.indexOf(option.value);
        if (idx > -1 && allowDeselect) {
          newValue.splice(idx, 1);
        } else if (idx === -1) {
          newValue.push(option.value);
        }
      }
      onChange?.(newValue.length ? newValue : null);
    } else {
      if (getIsSelected(option) && allowDeselect) {
        onChange?.(null);
        return;
      }
      if (option.dropdown) {
        const dropdownValue = option.dropdown.defaultValue || (option.dropdown.items[0] && typeof option.dropdown.items[0].value === "string" ? option.dropdown.items[0].value : null) || null;
        onChange?.(dropdownValue);
      } else {
        onChange?.(option.value);
      }
    }
  }, [multiple, valueArray, allowDeselect, onChange, getIsSelected]);
  const handleDropdownSelect = React.useCallback((optionValue, dropdownValue) => {
    if (multiple) {
      let newValue = Array.isArray(valueArray) ? [...valueArray] : [];
      const dropdownValues = options.find((opt) => opt.value === optionValue)?.dropdown?.items.map(
        (item) => typeof item.value === "string" ? item.value : ""
      ) || [];
      newValue = newValue.filter((v) => !dropdownValues.includes(v));
      if (!newValue.includes(dropdownValue)) {
        newValue.push(dropdownValue);
      }
      onChange?.(newValue.length ? newValue : null);
    } else {
      onChange?.(dropdownValue);
    }
  }, [multiple, valueArray, options, onChange]);
  const selectedClass = "bg-background font-semibold shadow-sm";
  const handleToggleClickEvent = React.useCallback((e) => {
    const optionValue = e.currentTarget.dataset.optionValue;
    const option = options.find((opt) => opt.value === optionValue);
    if (option) {
      handleToggleClick(option);
    }
  }, [options, handleToggleClick]);
  const handleDropdownSelectEvent = React.useCallback((e) => {
    const optionValue = e.currentTarget.dataset.optionValue;
    const dropdownValue = e.currentTarget.dataset.dropdownValue;
    if (optionValue && dropdownValue) {
      handleDropdownSelect(optionValue, dropdownValue);
    }
  }, [handleDropdownSelect]);
  const handleCloseAutoFocus = React.useCallback((e) => e.preventDefault(), []);
  const minWidthStyle = React.useMemo(() => ({ minWidth: 0 }), []);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
    !hideLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground", children: label }),
    /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        className: utils.cn(
          "flex items-center gap-1 flex-wrap bg-muted rounded-md p-1 w-fit",
          className
        ),
        children: options.map((option) => {
          const isSelected = getIsSelected(option);
          if (option.dropdown) {
            let selectedDropdownItem = null;
            if (multiple) {
              selectedDropdownItem = option.dropdown.items.find(
                (item) => valueArray.includes(
                  typeof item.value === "string" ? item.value : ""
                )
              );
            } else {
              selectedDropdownItem = option.dropdown.items.find(
                (item) => value === (typeof item.value === "string" ? item.value : void 0)
              );
            }
            return /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
              /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
                  /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
                    button.Button,
                    {
                      variant: "ghost",
                      size: "sm",
                      className: utils.cn(
                        "gap-px p-1 min-w-8 h-8 flex items-center justify-between rounded-r-none",
                        isSelected && selectedClass
                      ),
                      onClick: handleToggleClickEvent,
                      "data-option-value": option.value,
                      "aria-label": option.tooltip || option.label || option.value,
                      "aria-pressed": isSelected,
                      children: [
                        /* @__PURE__ */ jsxRuntime.jsxs(
                          "span",
                          {
                            className: "flex flex-row items-center gap-1",
                            style: minWidthStyle,
                            children: [
                              option.icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "contents text-muted-foreground", children: option.icon }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-muted-foreground text-xs leading-3 font-normal", children: [
                                option.label,
                                isSelected && ":"
                              ] }),
                              isSelected && option.dropdown && /* @__PURE__ */ jsxRuntime.jsx(DropdownOption, { children: selectedDropdownItem?.label || option.dropdown.defaultValue || "" })
                            ]
                          }
                        ),
                        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "!size-3 ml-1 text-muted-foreground/60 shrink-0" })
                      ]
                    }
                  ) }),
                  isSelected && option.dropdown && /* @__PURE__ */ jsxRuntime.jsx(
                    button.Button,
                    {
                      variant: "ghost",
                      size: "sm",
                      className: utils.cn(
                        "h-8 px-1 focus:outline-none cursor-pointer rounded-l-none rounded-r-md border-l-border border-l",
                        selectedClass
                      ),
                      "aria-label": "Clear selection",
                      onClick: handleToggleClickEvent,
                      "data-option-value": option.value,
                      children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.XIcon, { className: "!size-3 text-muted-foreground" })
                    }
                  )
                ] }) }),
                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: option.tooltip })
              ] }),
              /* @__PURE__ */ jsxRuntime.jsx(
                dropdownMenu.DropdownMenuContent,
                {
                  align: "end",
                  onCloseAutoFocus: handleCloseAutoFocus,
                  className: utils.cn(
                    "max-h-96 overflow-y-auto",
                    option.dropdown.dropdownDisplay === "grid" ? "grid grid-cols-5 gap-px p-1 " : ""
                  ),
                  children: option.dropdown.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
                    dropdownMenu.DropdownMenuItem,
                    {
                      className: (multiple ? valueArray.includes(
                        typeof item.value === "string" ? item.value : ""
                      ) : value === (typeof item.value === "string" ? item.value : void 0)) ? selectedClass : "",
                      onClick: handleDropdownSelectEvent,
                      "data-option-value": option.value,
                      "data-dropdown-value": typeof item.value === "string" ? item.value : "",
                      "aria-label": typeof item.label === "string" ? item.label : void 0,
                      "aria-selected": multiple ? valueArray.includes(
                        typeof item.value === "string" ? item.value : ""
                      ) : value === (typeof item.value === "string" ? item.value : void 0),
                      children: item.label
                    },
                    typeof item.value === "string" ? item.value : void 0
                  ))
                }
              )
            ] }, option.value);
          }
          return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
              button.Button,
              {
                variant: "ghost",
                size: "sm",
                className: utils.cn(
                  "gap-px p-1 min-w-8 h-8 text-xs flex items-center justify-between",
                  isSelected && selectedClass
                ),
                onClick: handleToggleClickEvent,
                "data-option-value": option.value,
                "aria-label": option.tooltip || option.label || option.value,
                "aria-pressed": isSelected,
                children: /* @__PURE__ */ jsxRuntime.jsxs(
                  "span",
                  {
                    className: utils.cn(
                      "text-sx text-muted-foreground",
                      option.icon ? "flex flex-row items-center gap-1" : "flex flex-col items-center justify-center flex-1"
                    ),
                    style: minWidthStyle,
                    children: [
                      option.icon,
                      option.label && /* @__PURE__ */ jsxRuntime.jsx(
                        "span",
                        {
                          className: utils.cn(
                            option.icon && "ml-2",
                            !isSelected && "font-normal"
                          ),
                          children: option.label
                        }
                      )
                    ]
                  }
                )
              }
            ) }),
            /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: option.tooltip })
          ] }, option.value);
        })
      }
    )
  ] });
}
function DropdownOption({
  color,
  children
}) {
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-start text-center w-full", children: [
    color && /* @__PURE__ */ jsxRuntime.jsx(
      "span",
      {
        className: utils.cn(
          "inline-block size-[14px] rounded-full border border-border mr-1",
          color
        )
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children })
  ] });
}

exports.DropdownOption = DropdownOption;
exports.ToggleGroup = ToggleGroup;
