'use strict';
'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect, useImperativeHandle } from 'react';
import { cn } from '../../../../fd-toolbox/lib/utils.js';
import { setMultiBrowserSelectionState, onMultiBrowserFilterReset } from './BaseMultiBrowser.funcs.js';
import { Input } from '../../../fd-component-toolbox/input/Input.js';
import { Button } from '../../../fd-component-toolbox/button/Button.js';
import { Icon } from '../../../fd-component-toolbox/icon/Icon.js';
import { BaseMultiBrowserDialog } from './base-multi-browser-dialog/BaseMultiBrowserDialog.js';
import { multiBrowserDialogMaxWidth } from '../../../fd-component-toolbox/dialog/dialog-constants.js';
import { getRequiredLabel } from '../../services/property-fields.js';
import { browserTypeToSuffix } from '../browser-type.js';
import { elements } from '../../../../fd-toolbox/constants/elements.js';
import { useEmptyRef } from '../../../../fd-toolbox/hooks/use-empty-ref.js';
import { useElementId } from '../../../../fd-toolbox/hooks/use-element-id.js';
import { browserDisplayModes } from '../../../../fd-toolbox/enums/enums.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function BaseMultiBrowser({
  required,
  propertyMeta,
  relatedResourceId,
  selectedResources,
  onCloseDialog,
  onDescriptionChange,
  invalid,
  parentContextName,
  displayMode,
  disabled,
  readOnly,
  relatedResourcePropertyMeta,
  onSetRelatedResourcePropertyMeta,
  propertyResourceMeta,
  onChange,
  setSelectedResources,
  skipAnimationOnce,
  variant,
  children: icons,
  ref,
  browserType
}) {
  const [selectedValues, setSelectedValues] = useState("");
  const browser = browserTypeToSuffix[browserType];
  const inputId = useElementId(propertyMeta.name + browser, parentContextName);
  const iconId = useElementId(propertyMeta.name + elements.browser.browserIcon, parentContextName);
  const dialogRef = useEmptyRef();
  const buttonRef = useEmptyRef();
  const activeDisplayMode = displayMode ?? browserDisplayModes.default;
  const data = {
    maxWidth: multiBrowserDialogMaxWidth,
    relatedResourcePropertyMeta: onSetRelatedResourcePropertyMeta ? relatedResourcePropertyMeta : propertyMeta,
    selectedResources,
    relatedResourceId
  };
  useEffect(() => {
    setMultiBrowserSelectionState(selectedResources, setSelectedValues, () => void 0, propertyResourceMeta);
  }, [selectedResources, propertyResourceMeta]);
  const onFilterReset = /* @__PURE__ */__name(() => onMultiBrowserFilterReset(onChange, setSelectedResources, dialogRef.current?.resetDialog), "onFilterReset");
  useImperativeHandle(ref, () => ({
    open: /* @__PURE__ */__name(() => buttonRef.current?.click(), "open")
  }));
  return /* @__PURE__ */jsx("div", {
    className: cn("relative h-8", activeDisplayMode === browserDisplayModes.short ? "max-w-48" : "w-full"),
    children: /* @__PURE__ */jsx(Input, {
      inputId,
      showClearIcon: !(disabled ?? readOnly),
      placeholder: propertyMeta.displayName,
      required,
      onChangeCapture: onDescriptionChange,
      label: getRequiredLabel(required, propertyMeta.displayName),
      disabled,
      readOnly: true,
      id: propertyMeta.name,
      value: selectedValues,
      onClear: onFilterReset,
      skipAnimationOnce,
      variant,
      className: "cursor-pointer placeholder:truncate",
      onClick: () => buttonRef.current?.click(),
      disableFocus: true,
      "aria-invalid": invalid,
      children: /* @__PURE__ */jsxs("div", {
        className: "flex items-center gap-0.5",
        children: [icons, /* @__PURE__ */jsx(BaseMultiBrowserDialog, {
          ref: dialogRef,
          disabled: disabled ?? readOnly,
          onTriggerClick: onSetRelatedResourcePropertyMeta,
          trigger: /* @__PURE__ */jsx(Button, {
            ref: buttonRef,
            size: "icon",
            variant: "icon",
            className: cn("size-4 p-0 focus:outline-none focus-visible:ring-0", disabled || readOnly ? "cursor-not-allowed" : ""),
            children: /* @__PURE__ */jsx(Icon, {
              id: iconId,
              name: "magnifyingGlass"
            })
          }),
          data,
          onCloseDialog
        })]
      })
    })
  });
}
__name(BaseMultiBrowser, "BaseMultiBrowser");

export { BaseMultiBrowser };
