'use strict';
'use client';
import { c } from 'react/compiler-runtime';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect, useImperativeHandle } from 'react';
import { Collapsible } from '@base-ui/react/collapsible';
import { getFilters, getFilteredKeys, resetResourceFilterListState, onStateChange } from './ResourceFilterList.funcs.js';
import { Button } from '../../../fd-component-toolbox/button/Button.js';
import { Filter } from '../filter/Filter.js';
import { iconSizes, iconNames, Icon } from '../../../fd-component-toolbox/icon/Icon.js';
import { initResourceFilterList } from './resource-filter-lists.js';
import { useAsyncEffect } from '../../../../fd-toolbox/hooks/use-async-effect.js';
import { cn } from '../../../../fd-toolbox/lib/utils.js';
import { filterListOrientations } from '../filter-list-positions.js';
import { elementSuffixes } from '../../../../fd-toolbox/constants/element-suffixes.js';
import { getManyToManyRelatedPropertyMetas } from '../../meta-providers.js';
import { filterTypes } from '../filter/filter-enums.js';
import { getResourceFilterListCollapseButtonId, getResourceFilterListRefreshButtonId, getResourceFilterListResetButtonId, getResourceFilterListId } from './resource-filter-list-ids.js';
import { useElementId } from '../../../../fd-toolbox/hooks/use-element-id.js';
import { useResourceFilterListDisplay } from './use-resource-filter-list-display.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function ResourceFilterList(t0) {
  const $ = c(44);
  const {
    ref,
    uiResourceMeta,
    stateKey,
    onFilterChange,
    queryODataFilters,
    onRefreshResources,
    config: configProp,
    parentContextName
  } = t0;
  const [mounted, setMounted] = useState(false);
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = {};
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  const [state, setState] = useState(t1);
  let t2;
  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = [];
    $[1] = t2;
  } else {
    t2 = $[1];
  }
  const [filterKeys, setFilterKeys] = useState(t2);
  let t3;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = {};
    $[2] = t3;
  } else {
    t3 = $[2];
  }
  const [filteredAndOtherPropertyMetas, setFilteredAndOtherPropertyMetas] = useState(t3);
  let t4;
  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
    t4 = {};
    $[3] = t4;
  } else {
    t4 = $[3];
  }
  const [filteredPropertyMetas, setFilteredPropertyMetas] = useState(t4);
  const [open, setOpen] = useState(false);
  const [relationInfo, setRelationInfo] = useState();
  const [resetCounter, setResetCounter] = useState(0);
  const config = configProp;
  const filtersType = config?.type ?? filterTypes.default;
  const resourceFilterListContainerId = useElementId(ResourceFilterList.displayName, parentContextName);
  const {
    filtersToDisplayCount
  } = useResourceFilterListDisplay();
  let t5;
  let t6;
  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
    t5 = () => {
      setMounted(true);
    };
    t6 = [];
    $[4] = t5;
    $[5] = t6;
  } else {
    t5 = $[4];
    t6 = $[5];
  }
  useEffect(t5, t6);
  let t7;
  let t8;
  if ($[6] !== config || $[7] !== filteredPropertyMetas || $[8] !== state) {
    t7 = () => ({
      getFilters: __name(() => getFilters(state, filteredPropertyMetas, config), "getFilters")
    });
    t8 = [config, filteredPropertyMetas, state];
    $[6] = config;
    $[7] = filteredPropertyMetas;
    $[8] = state;
    $[9] = t7;
    $[10] = t8;
  } else {
    t7 = $[9];
    t8 = $[10];
  }
  useImperativeHandle(ref, t7, t8);
  let t10;
  let t9;
  if ($[11] !== uiResourceMeta) {
    t9 = async () => {
      setRelationInfo(await getManyToManyRelatedPropertyMetas(uiResourceMeta));
    };
    t10 = [uiResourceMeta];
    $[11] = uiResourceMeta;
    $[12] = t10;
    $[13] = t9;
  } else {
    t10 = $[12];
    t9 = $[13];
  }
  useAsyncEffect(t9, t10);
  let t11;
  if ($[14] !== onFilterChange || $[15] !== queryODataFilters || $[16] !== relationInfo || $[17] !== state || $[18] !== stateKey || $[19] !== uiResourceMeta.resourceMeta) {
    t11 = async () => {
      await initResourceFilterList(stateKey, setState, setFilteredPropertyMetas, setFilteredAndOtherPropertyMetas, queryODataFilters ?? [], setFilterKeys, state, uiResourceMeta.resourceMeta, relationInfo, onFilterChange);
    };
    $[14] = onFilterChange;
    $[15] = queryODataFilters;
    $[16] = relationInfo;
    $[17] = state;
    $[18] = stateKey;
    $[19] = uiResourceMeta.resourceMeta;
    $[20] = t11;
  } else {
    t11 = $[20];
  }
  let t12;
  if ($[21] !== relationInfo || $[22] !== stateKey || $[23] !== uiResourceMeta) {
    t12 = [stateKey, relationInfo, uiResourceMeta];
    $[21] = relationInfo;
    $[22] = stateKey;
    $[23] = uiResourceMeta;
    $[24] = t12;
  } else {
    t12 = $[24];
  }
  useAsyncEffect(t11, t12);
  let t13;
  if ($[25] !== config?.orientation || $[26] !== config?.showRefreshButton || $[27] !== config?.showResetButton || $[28] !== config?.type || $[29] !== filterKeys || $[30] !== filteredAndOtherPropertyMetas || $[31] !== filtersToDisplayCount || $[32] !== filtersType || $[33] !== mounted || $[34] !== onFilterChange || $[35] !== onRefreshResources || $[36] !== open || $[37] !== relationInfo || $[38] !== resetCounter || $[39] !== resourceFilterListContainerId || $[40] !== state || $[41] !== stateKey || $[42] !== uiResourceMeta.properties) {
    const filteredKeys = getFilteredKeys(filterKeys, uiResourceMeta.properties, filteredAndOtherPropertyMetas, relationInfo);
    const isVertical = config?.orientation === filterListOrientations.vertical;
    const isCollapsible = !isVertical && filteredKeys.length > filtersToDisplayCount;
    t13 = jsx("div", {
      className: cn("w-full pt-0 pr-4", config?.orientation === filterListOrientations.vertical && "md:pt-0 md:pl-6"),
      children: jsx(Collapsible.Root, {
        open,
        onOpenChange: setOpen,
        children: jsx("div", {
          className: "relative flex flex-col items-start gap-2",
          children: jsxs("div", {
            id: resourceFilterListContainerId,
            className: cn(config?.type === filterTypes.input ? "mt-10 flex w-full grid-cols-[auto_repeat(6,minmax(0,1fr))] flex-col gap-2 md:mt-0 md:grid md:items-center" : "mt-10 flex w-fit flex-wrap gap-2 md:mt-0 md:items-start", config?.orientation === filterListOrientations.vertical && "grid w-full grid-cols-2 md:flex md:w-48 md:flex-col md:pb-2"),
            children: [jsxs("div", {
              className: "absolute top-0 flex items-center gap-2 md:relative",
              children: [!isVertical && isCollapsible && filtersToDisplayCount > 0 && (open || filteredKeys.length > filtersToDisplayCount) && jsx(Collapsible.Trigger, {
                render: jsx(FilterActionButton, {
                  id: getResourceFilterListCollapseButtonId(resourceFilterListContainerId),
                  iconName: iconNames.filter,
                  variant: "ghost",
                  className: "rf-collapse-btn size-7 shrink-0",
                  tooltipText: "Collapse",
                  iconSize: iconSizes.small
                })
              }), (config?.showRefreshButton ?? true) && jsx(FilterActionButton, {
                id: getResourceFilterListRefreshButtonId(resourceFilterListContainerId),
                onClick: onRefreshResources,
                iconName: iconNames.refresh,
                variant: "ghost",
                className: "size-7 shrink-0",
                tooltipText: "Refresh",
                iconSize: iconSizes.small
              }), (config?.showResetButton ?? true) && (open || filteredKeys.length > 0) && jsx(FilterActionButton, {
                id: getResourceFilterListResetButtonId(resourceFilterListContainerId),
                onClick: () => resetResourceFilterListState(stateKey, setState, setResetCounter, onFilterChange),
                iconName: iconNames.eraser,
                variant: "ghost",
                tooltipText: "Reset",
                className: "size-7 shrink-0"
              })]
            }), mounted && Object.keys(state).length > 0 && filteredKeys.map((item, num) => {
              const shouldShow = open || !isCollapsible || isVertical || num < filtersToDisplayCount;
              if (!shouldShow) {
                return void 0;
              }
              return jsx("div", {
                className: cn("relative -left-14 w-fit md:left-0", num >= filtersToDisplayCount && !open && isCollapsible && "hidden"),
                id: getResourceFilterListId(resourceFilterListContainerId, num),
                children: filteredAndOtherPropertyMetas[item] && jsx(Filter, {
                  state: state[item].filter,
                  onStateChange: filter => onStateChange(item, state, filter, stateKey, setState),
                  propertyMeta: filteredAndOtherPropertyMetas[item],
                  disabled: state[item].disabled,
                  onChange: onFilterChange,
                  parentContextName: resourceFilterListContainerId,
                  orientation: config?.orientation ?? filterListOrientations.horizontal,
                  type: filtersType,
                  resetCounter
                })
              }, item);
            })]
          })
        })
      })
    });
    $[25] = config?.orientation;
    $[26] = config?.showRefreshButton;
    $[27] = config?.showResetButton;
    $[28] = config?.type;
    $[29] = filterKeys;
    $[30] = filteredAndOtherPropertyMetas;
    $[31] = filtersToDisplayCount;
    $[32] = filtersType;
    $[33] = mounted;
    $[34] = onFilterChange;
    $[35] = onRefreshResources;
    $[36] = open;
    $[37] = relationInfo;
    $[38] = resetCounter;
    $[39] = resourceFilterListContainerId;
    $[40] = state;
    $[41] = stateKey;
    $[42] = uiResourceMeta.properties;
    $[43] = t13;
  } else {
    t13 = $[43];
  }
  return t13;
}
__name(ResourceFilterList, "ResourceFilterList");
ResourceFilterList.displayName = "ResourceFilterList";
function FilterActionButton({
  id,
  onClick,
  iconName,
  iconSize,
  variant,
  className,
  tooltipText,
  ref
}) {
  return /* @__PURE__ */jsx(Button, {
    ref,
    id: id ?? iconName + elementSuffixes.filterActionButton,
    variant: variant ?? "icon",
    size: "icon",
    onClick,
    className: className ?? "",
    tooltipText,
    tooltipClassName: "mb-1",
    tooltipSide: "top",
    children: /* @__PURE__ */jsx(Icon, {
      name: iconName,
      size: iconSize
    })
  });
}
__name(FilterActionButton, "FilterActionButton");
FilterActionButton.displayName = elementSuffixes.filterActionButton;

export { ResourceFilterList };
