'use strict';
'use client';
import { c } from 'react/compiler-runtime';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { getOptionalPropertyValue } from '../../../../fd-toolbox/objects/property-value.js';
import { MultiSelect, MultiselectTrigger, MultiselectInput, MultiselectContent, MultiselectList, MultiselectItem } from '../../../fd-component-toolbox/multiselect/Multiselect.js';
import { cn } from '../../../../fd-toolbox/lib/utils.js';
import { FadeOutText } from '../../../fd-component-toolbox/fade-out-text/FadeOutText.js';
import { getMultiselectCellTemplateValuesArray } from './MultiselectCellTemplate.funcs.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function MultiselectCellTemplate(t0) {
  const $ = c(12);
  const {
    resource,
    entityPath,
    valueProperty,
    transformValues
  } = t0;
  let t1;
  if ($[0] !== entityPath || $[1] !== resource || $[2] !== transformValues || $[3] !== valueProperty) {
    const multiselectItems = getOptionalPropertyValue(resource[entityPath] ?? {}, valueProperty);
    const valuesArray = getMultiselectCellTemplateValuesArray(multiselectItems, transformValues);
    t1 = prepareMultiselectCellDisplayValues(valuesArray);
    $[0] = entityPath;
    $[1] = resource;
    $[2] = transformValues;
    $[3] = valueProperty;
    $[4] = t1;
  } else {
    t1 = $[4];
  }
  const displayValues = t1;
  let t2;
  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = [];
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  const [selectedValues, setSelectedValues] = useState(t2);
  let t3;
  let t4;
  if ($[6] !== displayValues) {
    t3 = () => {
      if (displayValues && displayValues.size > 0) {
        setSelectedValues(Array.from(displayValues.keys()));
      }
    };
    t4 = [displayValues];
    $[6] = displayValues;
    $[7] = t3;
    $[8] = t4;
  } else {
    t3 = $[7];
    t4 = $[8];
  }
  useEffect(t3, t4);
  let t5;
  if ($[9] !== displayValues || $[10] !== selectedValues) {
    t5 = displayValues && displayValues.size !== 0 ? jsx("div", {
      children: displayValues.size === 1 ? jsx(FadeOutText, {
        children: jsx("div", {
          children: displayValues.get("0")
        })
      }) : jsxs(MultiSelect, {
        values: selectedValues,
        onValuesChange: setSelectedValues,
        disabled: false,
        displayValues,
        variant: "float",
        showSelectAll: true,
        children: [jsx(MultiselectTrigger, {
          children: jsx(MultiselectInput, {
            className: "mt-0 w-full"
          })
        }), jsx(MultiselectContent, {
          className: "absolute",
          children: jsx(MultiselectList, {
            className: "top-9 z-50",
            children: [...displayValues].map(_temp)
          })
        })]
      })
    }) : void 0;
    $[9] = displayValues;
    $[10] = selectedValues;
    $[11] = t5;
  } else {
    t5 = $[11];
  }
  return t5;
}
function _temp(t0) {
  const [key, value] = t0;
  return jsx(MultiselectItem, {
    className: cn("min-h-6 whitespace-nowrap"),
    value: key,
    children: value
  }, key);
}
__name(MultiselectCellTemplate, "MultiselectCellTemplate");
function prepareMultiselectCellDisplayValues(item) {
  let result;
  if (!item) {
    return result;
  }
  if (!Array.isArray(item)) {
    result = /* @__PURE__ */new Map([["0", item]]);
  } else {
    result = item.reduce((map, elem, resourceMetaId) => {
      map.set(resourceMetaId.toString(), elem);
      return map;
    }, /* @__PURE__ */new Map());
  }
  return result;
}
__name(prepareMultiselectCellDisplayValues, "prepareMultiselectCellDisplayValues");

export { MultiselectCellTemplate as default };
