'use strict';
'use client';
import { c } from 'react/compiler-runtime';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useImperativeHandle, useEffect } from 'react';
import { Command, CommandList, CommandEmpty, CommandItem } from '../command/Command.js';
import { Command as Command$1 } from 'cmdk';
import { Check } from 'lucide-react';
import { cn } from '../../../fd-toolbox/lib/utils.js';
import { handleOpenChange, onMultiSelectValueChange, getMultiSelectStatusesById, registerClickOutsideMultiselectHandler, createOnKeyDown, onBlurHandler, multiSelectVariants, resetOnClick, inputOnClick, mousePreventDefault, onItemSelect } from './Multiselect.funcs.js';
import { LabelAnimation } from '../animation/LabelAnimation.js';
import { Button } from '../button/Button.js';
import { Icon, iconNames } from '../icon/Icon.js';
import { selectAllDescription, selectAllValue } from './fd-multi-select-constants.js';
import { FadeOutText } from '../fade-out-text/FadeOutText.js';
import { MultiselectContext as multiselectContext, useMultiselect } from './hooks/use-multi-select.js';
import { useEmptyRef } from '../../../fd-toolbox/hooks/use-empty-ref.js';
import { componentVariantNames } from '../../../fd-toolbox/constants/html-constants.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function MultiSelect(t0) {
  const $ = c(29);
  const {
    values: value,
    onValuesChange: onValueChange,
    displayValues,
    loop,
    className,
    children,
    dir,
    disabled,
    variant,
    showSelectAll,
    id,
    onOpenChange,
    ref
  } = t0;
  const [inputValue, setInputValue] = useState("");
  const [open, setOpen] = useState(false);
  const [activeIndex, setActiveIndex] = useState(-1);
  const [description, setDescription] = useState("");
  const [hovered, setHovered] = useState(false);
  const containerRef = useEmptyRef();
  const isAllSelected = value.length === displayValues?.size;
  let t1;
  if ($[0] !== onOpenChange) {
    t1 = isOpen => handleOpenChange(isOpen, setOpen, onOpenChange);
    $[0] = onOpenChange;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  const onOpenToggle = t1;
  let t2;
  if ($[2] !== onOpenToggle) {
    t2 = () => ({
      open: __name(() => onOpenToggle(true), "open")
    });
    $[2] = onOpenToggle;
    $[3] = t2;
  } else {
    t2 = $[3];
  }
  useImperativeHandle(ref, t2);
  let t3;
  if ($[4] !== displayValues || $[5] !== isAllSelected || $[6] !== onValueChange || $[7] !== showSelectAll || $[8] !== value) {
    t3 = val => onMultiSelectValueChange(val, value, onValueChange, setDescription, showSelectAll, isAllSelected, displayValues);
    $[4] = displayValues;
    $[5] = isAllSelected;
    $[6] = onValueChange;
    $[7] = showSelectAll;
    $[8] = value;
    $[9] = t3;
  } else {
    t3 = $[9];
  }
  const onValueChangeCallback = __name(t3, "onValueChangeCallback");
  let t4;
  if ($[10] !== onValueChange) {
    t4 = () => onValueChange([]);
    $[10] = onValueChange;
    $[11] = t4;
  } else {
    t4 = $[11];
  }
  const contextValue = {
    value,
    onValueChange: onValueChangeCallback,
    description,
    open,
    onOpenChangeCallback: onOpenToggle,
    inputValue,
    setInputValue,
    activeIndex,
    setActiveIndex,
    disabled,
    onReset: __name(t4, "onReset"),
    hovered,
    setHovered,
    variant: variant ?? componentVariantNames.float,
    showSelectAll,
    isAllSelected
  };
  let t5;
  let t6;
  if ($[12] !== value) {
    t5 = () => {
      if (!value || value.length === 0) {
        setDescription("");
      }
    };
    t6 = [value];
    $[12] = value;
    $[13] = t5;
    $[14] = t6;
  } else {
    t5 = $[13];
    t6 = $[14];
  }
  useEffect(t5, t6);
  let t7;
  let t8;
  if ($[15] !== displayValues || $[16] !== isAllSelected || $[17] !== showSelectAll || $[18] !== value) {
    t7 = () => {
      if (showSelectAll && isAllSelected) {
        setDescription(selectAllDescription);
      } else {
        if (value && displayValues) {
          const statuses = getMultiSelectStatusesById(value, displayValues);
          setDescription(statuses);
        }
      }
    };
    t8 = [value, displayValues, showSelectAll, isAllSelected];
    $[15] = displayValues;
    $[16] = isAllSelected;
    $[17] = showSelectAll;
    $[18] = value;
    $[19] = t7;
    $[20] = t8;
  } else {
    t7 = $[19];
    t8 = $[20];
  }
  useEffect(t7, t8);
  let t10;
  let t9;
  if ($[21] !== containerRef || $[22] !== onOpenToggle || $[23] !== open) {
    t9 = () => {
      if (!open) {
        return void 0;
      }
      return registerClickOutsideMultiselectHandler(containerRef, onOpenToggle);
    };
    t10 = [open, onOpenToggle, containerRef];
    $[21] = containerRef;
    $[22] = onOpenToggle;
    $[23] = open;
    $[24] = t10;
    $[25] = t9;
  } else {
    t10 = $[24];
    t9 = $[25];
  }
  useEffect(t9, t10);
  const onKeyDown = createOnKeyDown(value, inputValue, activeIndex, setActiveIndex, onValueChange, setOpen, loop, dir);
  let t11;
  if ($[26] !== containerRef || $[27] !== onOpenToggle) {
    t11 = event => onBlurHandler(event, containerRef, onOpenToggle);
    $[26] = containerRef;
    $[27] = onOpenToggle;
    $[28] = t11;
  } else {
    t11 = $[28];
  }
  return jsx(multiselectContext.Provider, {
    value: contextValue,
    children: jsx(Command, {
      id,
      ref: containerRef,
      onKeyDown,
      onBlur: t11,
      className: cn("flex flex-col overflow-visible bg-transparent", className),
      dir,
      children
    })
  });
}
__name(MultiSelect, "MultiSelect");
function MultiselectTrigger({
  className,
  children,
  ref
}) {
  const {
    disabled,
    setHovered,
    variant
  } = useMultiselect();
  return /* @__PURE__ */jsx("div", {
    ref,
    className: cn(multiSelectVariants({
      variant
    }), disabled && "cursor-not-allowed opacity-50", className),
    onMouseOver: () => setHovered(true),
    onMouseOut: () => setHovered(false),
    children
  });
}
__name(MultiselectTrigger, "MultiselectTrigger");
MultiselectTrigger.displayName = "MultiselectTrigger";
function MultiselectReset() {
  const $ = c(3);
  const {
    onReset,
    onOpenChangeCallback
  } = useMultiselect();
  let t0;
  if ($[0] !== onOpenChangeCallback || $[1] !== onReset) {
    t0 = jsx("div", {
      className: "flex items-center",
      children: jsx(Button, {
        variant: "icon",
        size: "icon",
        onClick: event => resetOnClick(event, onReset, onOpenChangeCallback),
        className: "size-4 p-0",
        children: jsx(Icon, {
          name: iconNames.eraser,
          className: "bg-background"
        })
      })
    });
    $[0] = onOpenChangeCallback;
    $[1] = onReset;
    $[2] = t0;
  } else {
    t0 = $[2];
  }
  return t0;
}
__name(MultiselectReset, "MultiselectReset");
MultiselectReset.displayName = "MultiselectReset";
function MultiselectInput({
  className,
  placeholder,
  animatedPlaceholder,
  ref
}) {
  const {
    onOpenChangeCallback,
    description,
    open,
    inputValue,
    setInputValue,
    activeIndex,
    setActiveIndex,
    disabled,
    hovered,
    variant
  } = useMultiselect();
  return /* @__PURE__ */jsxs("div", {
    className: "flex w-full cursor-pointer items-center justify-between",
    onClick: () => inputOnClick(setActiveIndex, open, onOpenChangeCallback),
    tabIndex: 0,
    children: [/* @__PURE__ */jsxs("div", {
      className: "relative w-full",
      children: [/* @__PURE__ */jsx(FadeOutText, {
        children: /* @__PURE__ */jsx(Command$1.Input, {
          ref,
          placeholder: description || (placeholder ?? ""),
          value: inputValue,
          onValueChange: activeIndex === -1 ? setInputValue : void 0,
          disabled,
          className: cn("w-full flex-1 bg-transparent pl-2 caret-transparent outline-none", description ? "placeholder:text-primary" : "placeholder:text-muted-foreground", className)
        })
      }), animatedPlaceholder && /* @__PURE__ */jsx(LabelAnimation, {
        label: animatedPlaceholder,
        shouldAnimate: !!description || !!inputValue,
        className: "top-0 max-w-full",
        variant
      })]
    }), /* @__PURE__ */jsx("div", {
      className: "flex size-4 shrink-0 items-center justify-center",
      children: description ? /* @__PURE__ */jsx("div", {
        className: cn("pointer-events-none opacity-0 transition-opacity", hovered && "pointer-events-auto opacity-100"),
        children: /* @__PURE__ */jsx(MultiselectReset, {})
      }) : /* @__PURE__ */jsx("div", {
        className: "focus:outline-none",
        children: /* @__PURE__ */jsx(Icon, {
          name: "caretSort",
          className: "text-foreground pointer-events-none opacity-50"
        })
      })
    })]
  });
}
__name(MultiselectInput, "MultiselectInput");
MultiselectInput.displayName = "MultiselectInput";
function MultiselectContent({
  children,
  className,
  ref
}) {
  const {
    open
  } = useMultiselect();
  return /* @__PURE__ */jsx("div", {
    ref,
    className: cn("relative top-1", className),
    children: open && children
  });
}
__name(MultiselectContent, "MultiselectContent");
MultiselectContent.displayName = "MultiselectContent";
function MultiselectList({
  className,
  children,
  ref
}) {
  const {
    showSelectAll
  } = useMultiselect();
  return /* @__PURE__ */jsxs(CommandList, {
    ref,
    className: cn("bg-background absolute top-0 z-10 flex w-auto min-w-full flex-col gap-2 rounded-md border p-2 shadow-md transition-colors", className),
    children: [showSelectAll && /* @__PURE__ */jsx(MultiselectItem, {
      value: selectAllValue,
      selectAll: false,
      children: selectAllDescription
    }), children, /* @__PURE__ */jsx(CommandEmpty, {
      children: /* @__PURE__ */jsx("span", {
        className: "text-muted-foreground",
        children: "No results found"
      })
    })]
  });
}
__name(MultiselectList, "MultiselectList");
MultiselectList.displayName = "MultiselectList";
function MultiselectItem({
  className,
  value,
  children,
  selectAll,
  ref,
  disabled
}) {
  const {
    value: options,
    onValueChange,
    setInputValue,
    isAllSelected
  } = useMultiselect();
  const isIncluded = selectAll ? isAllSelected : options.includes(value);
  return /* @__PURE__ */jsxs(CommandItem, {
    ref,
    onSelect: () => onItemSelect(value, onValueChange, setInputValue),
    className: cn("flex cursor-pointer justify-between rounded-md px-2 py-1 transition-colors", className, isIncluded && "bg-accent text-accent-foreground cursor-default", disabled && "cursor-not-allowed opacity-50"),
    onMouseDown: mousePreventDefault,
    children: [children, /* @__PURE__ */jsx(Check, {
      className: cn("ml-2 size-4 opacity-0", isIncluded && "opacity-50")
    })]
  });
}
__name(MultiselectItem, "MultiselectItem");
MultiselectItem.displayName = "MultiselectItem";

export { MultiSelect, MultiselectContent, MultiselectInput, MultiselectItem, MultiselectList, MultiselectTrigger, multiSelectVariants };
