'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import { PlusIcon } from '../../icons/Plus/index.js';
import { XIcon } from '../../icons/X/index.js';
import { DraggableSortable } from '../DraggableSortable/index.js';
import { Pill } from '../Pill/index.js';
import './index.scss';
const baseClass = 'pill-selector';
/**
 * Displays a wrappable list of pills that can be selected or deselected.
 * If `draggable` is true, the pills can be reordered by dragging.
 */ export const PillSelector = ({ draggable, onClick, pills })=>{
    // IMPORTANT: Do NOT wrap DraggableSortable in a dynamic component function using useMemo.
    // BAD: useMemo(() => ({ children }) => <DraggableSortable>...</DraggableSortable>, [deps])
    // This creates a new function reference on each recomputation, causing React to treat it as a
    // different component type, triggering unmount/mount cycles instead of just updating props.
    // GOOD: Use conditional rendering directly: draggable ? <DraggableSortable /> : <div />
    const pillElements = React.useMemo(()=>{
        return pills.map((pill, i)=>{
            return /*#__PURE__*/ _jsxDEV(Pill, {
                alignIcon: "left",
                "aria-checked": pill.selected,
                className: [
                    `${baseClass}__pill`,
                    pill.selected && `${baseClass}__pill--selected`
                ].filter(Boolean).join(' '),
                draggable: Boolean(draggable),
                icon: pill.selected ? /*#__PURE__*/ _jsxDEV(XIcon, {}, void 0, false, {
                    fileName: "src/elements/PillSelector/index.tsx",
                    lineNumber: 48,
                    columnNumber: 33
                }, void 0) : /*#__PURE__*/ _jsxDEV(PlusIcon, {}, void 0, false, {
                    fileName: "src/elements/PillSelector/index.tsx",
                    lineNumber: 48,
                    columnNumber: 45
                }, void 0),
                id: pill.name,
                onClick: ()=>{
                    if (onClick) {
                        void onClick({
                            pill
                        });
                    }
                },
                size: "small",
                children: pill.Label ?? /*#__PURE__*/ _jsxDEV("span", {
                    className: `${baseClass}__pill-label`,
                    children: pill.name
                }, void 0, false, {
                    fileName: "src/elements/PillSelector/index.tsx",
                    lineNumber: 58,
                    columnNumber: 26
                }, this)
            }, pill.key ?? `${pill.name}-${i}`, false, {
                fileName: "src/elements/PillSelector/index.tsx",
                lineNumber: 41,
                columnNumber: 9
            }, this);
        });
    }, [
        pills,
        onClick,
        draggable
    ]);
    if (draggable) {
        return /*#__PURE__*/ _jsxDEV(DraggableSortable, {
            className: baseClass,
            ids: pills.map((pill)=>pill.name),
            onDragEnd: ({ moveFromIndex, moveToIndex })=>{
                draggable.onDragEnd({
                    moveFromIndex,
                    moveToIndex
                });
            },
            children: pillElements
        }, void 0, false, {
            fileName: "src/elements/PillSelector/index.tsx",
            lineNumber: 66,
            columnNumber: 7
        }, this);
    }
    return /*#__PURE__*/ _jsxDEV("div", {
        className: baseClass,
        children: pillElements
    }, void 0, false, {
        fileName: "src/elements/PillSelector/index.tsx",
        lineNumber: 81,
        columnNumber: 10
    }, this);
};

//# sourceMappingURL=index.js.map