'use strict';
import { c } from 'react/compiler-runtime';
import { jsxs, jsx } from 'react/jsx-runtime';
import { cn } from '../../../fd-toolbox/lib/utils.js';
import { Badge } from '../badge/Badge.js';
import { Separator } from '../separator/Separator.js';
import { useState, useEffect } from 'react';
import { onUpdateSelection, getBadgeClasses, onToggleItem } from './BadgeToggleList.funcs.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function BadgeToggleList(t0) {
  const $ = c(15);
  const {
    items,
    selectedItems: selectedItemsProp,
    onSelectedItemsChange: onSelectedItemsChangeProp
  } = t0;
  let t1;
  if ($[0] !== selectedItemsProp) {
    t1 = selectedItemsProp ?? [];
    $[0] = selectedItemsProp;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  const [selectedItems, setSelectedItems] = useState(t1);
  const [isSelectedAllItems, setIsSelectedAllItems] = useState(true);
  let t2;
  let t3;
  if ($[2] !== items.length || $[3] !== onSelectedItemsChangeProp || $[4] !== selectedItemsProp) {
    t2 = () => {
      onUpdateSelection(selectedItemsProp ?? [], items.length, setSelectedItems, setIsSelectedAllItems, onSelectedItemsChangeProp);
    };
    t3 = [selectedItemsProp, items.length, setSelectedItems, setIsSelectedAllItems, onSelectedItemsChangeProp];
    $[2] = items.length;
    $[3] = onSelectedItemsChangeProp;
    $[4] = selectedItemsProp;
    $[5] = t2;
    $[6] = t3;
  } else {
    t2 = $[5];
    t3 = $[6];
  }
  useEffect(t2, t3);
  let t4;
  if ($[7] !== isSelectedAllItems || $[8] !== items || $[9] !== onSelectedItemsChangeProp || $[10] !== selectedItems) {
    let t5;
    if ($[12] !== items || $[13] !== onSelectedItemsChangeProp) {
      t5 = () => onUpdateSelection(items, items.length, setSelectedItems, setIsSelectedAllItems, onSelectedItemsChangeProp);
      $[12] = items;
      $[13] = onSelectedItemsChangeProp;
      $[14] = t5;
    } else {
      t5 = $[14];
    }
    t4 = jsxs("div", {
      className: "flex flex-wrap items-start gap-2",
      children: [jsx(Badge, {
        className: cn("cursor-pointer rounded-sm p-1 px-2 text-xs font-light transition-colors duration-200 hover:text-primary-foreground", isSelectedAllItems ? "bg-primary/80 text-primary-foreground hover:border-foreground/80 hover:bg-primary/70" : "bg-muted hover:bg-primary/80"),
        onClick: t5,
        children: "All"
      }), jsx(Separator, {
        orientation: "vertical",
        className: "mx-2 h-7"
      }), items.map(item => jsx(Badge, {
        onClick: () => onToggleItem(item, items, selectedItems, isSelectedAllItems, value => onUpdateSelection(value, items.length, setSelectedItems, setIsSelectedAllItems, onSelectedItemsChangeProp)),
        className: cn("cursor-pointer rounded-sm p-1 px-2 text-xs font-light transition-colors duration-200 hover:text-primary-foreground", getBadgeClasses(item, isSelectedAllItems, selectedItems, "bg-primary/80 text-primary-foreground hover:border-foreground/80 hover:bg-primary/70", "bg-muted hover:bg-primary/80")),
        children: item
      }, item))]
    });
    $[7] = isSelectedAllItems;
    $[8] = items;
    $[9] = onSelectedItemsChangeProp;
    $[10] = selectedItems;
    $[11] = t4;
  } else {
    t4 = $[11];
  }
  return t4;
}
__name(BadgeToggleList, "BadgeToggleList");

export { BadgeToggleList };
