'use strict';
'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState } from 'react';
import { Input } from '../../../fd-component-toolbox/input/Input.js';
import { cn } from '../../../../fd-toolbox/lib/utils.js';
import { Button } from '../../../fd-component-toolbox/button/Button.js';
import { Icon, iconSizes, iconNames } from '../../../fd-component-toolbox/icon/Icon.js';
import { useAsyncEffect } from '../../../../fd-toolbox/hooks/use-async-effect.js';
import { getRequiredLabel } from '../../services/property-fields.js';
import { browserTypeToSuffix, browserTypes } from '../browser-type.js';
import { BrowserDialog } from './browser-dialog/BrowserDialog.js';
import { writeBrowserValue, setBrowserDescription, onUpdateBrowserInput } from './Browser.funcs.js';
import { createEmptyShortResourceDescriptor } from './short-resource-descriptor.js';
import { elements } from '../../../../fd-toolbox/constants/elements.js';
import { useElementId } from '../../../../fd-toolbox/hooks/use-element-id.js';
import { browserDisplayModes } from '../../../../fd-toolbox/enums/enums.js';
import { useEmptyRef } from '../../../../fd-toolbox/hooks/use-empty-ref.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function Browser({
  required,
  propertyMeta,
  onChange,
  excludeResourceIds,
  displayMode,
  disabled,
  readOnly,
  parentContextName,
  relatedResourceId,
  value,
  invalid,
  children: icons
}) {
  const [shortResourceDescriptor, setShortResourceDescriptor] = useState(createEmptyShortResourceDescriptor());
  const [description, setDescription] = useState("");
  const [loadComplete, setLoadComplete] = useState(false);
  const inputId = useElementId(propertyMeta.name + browserTypeToSuffix[browserTypes.browser], parentContextName);
  const iconId = useElementId(propertyMeta.name + elements.browser.browserIcon, parentContextName);
  const buttonRef = useEmptyRef();
  const activeDisplayMode = displayMode ?? browserDisplayModes.default;
  useAsyncEffect(async () => {
    const resolvedValueId = value ?? relatedResourceId ?? "";
    setLoadComplete(false);
    await writeBrowserValue(resolvedValueId, propertyMeta, setDescription);
    setLoadComplete(true);
  }, [propertyMeta, relatedResourceId, value]);
  const onCloseEditProperty = /* @__PURE__ */__name(data => data && (setShortResourceDescriptor(data), setBrowserDescription(data, setDescription), onChange?.(data.id)), "onCloseEditProperty");
  return /* @__PURE__ */jsx("div", {
    className: cn("relative", activeDisplayMode ? "max-w-48" : "w-full"),
    children: /* @__PURE__ */jsx(Input, {
      value: description,
      inputId,
      showClearIcon: !(disabled ?? readOnly),
      placeholder: propertyMeta.displayName,
      label: getRequiredLabel(propertyMeta.required, propertyMeta.displayName),
      readOnly,
      required,
      disabled,
      "aria-invalid": invalid,
      onChange: v => onUpdateBrowserInput(v, setShortResourceDescriptor, setDescription, onChange),
      skipAnimationOnce: !loadComplete,
      onClick: () => buttonRef.current?.click(),
      disableFocus: true,
      className: "cursor-pointer",
      children: /* @__PURE__ */jsxs("div", {
        className: "flex items-center gap-0.5",
        children: [icons, /* @__PURE__ */jsx(BrowserDialog, {
          propertyMeta,
          currentResourceId: shortResourceDescriptor.id ?? value ?? relatedResourceId ?? void 0,
          excludeResourceIds,
          closeDialog: onCloseEditProperty,
          trigger: /* @__PURE__ */jsx(Button, {
            ref: buttonRef,
            size: "icon",
            variant: "icon",
            className: cn("size-4 p-0", disabled || readOnly ? "cursor-not-allowed" : ""),
            children: /* @__PURE__ */jsx(Icon, {
              id: iconId,
              name: iconNames.magnifyingGlass,
              size: iconSizes.small
            })
          }),
          setDescription,
          disabled: disabled ?? readOnly
        })]
      })
    })
  });
}
__name(Browser, "Browser");

export { Browser };
