import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useId, useState } from "react";
import { Button } from "./button";
import { Checkbox } from "./checkbox";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger, } from "./context-menu";
import { Input } from "./input";
import { Label } from "./label";
import { Switch } from "./switch";
function LabeledSwitch({ id, label, checked, onCheckedChange, }) {
    return (_jsxs("div", { className: "flex gap-1", children: [_jsx(Switch, { id: id, checked: checked, onCheckedChange: onCheckedChange }), _jsx(Label, { htmlFor: id, children: label })] }));
}
function EditableList({ label, items, parseItem, onItemsChange, }) {
    const id = useId();
    const [inputValue, setInputValue] = useState("");
    const [selectedItems, setSelectedItems] = useState(new Set());
    const addItem = () => {
        const trimmedValue = inputValue.trim();
        if (!trimmedValue)
            return;
        const nextItem = parseItem(trimmedValue);
        if (nextItem === undefined)
            return;
        onItemsChange([...items, nextItem]);
        setInputValue("");
    };
    const deleteItems = (indexes) => {
        onItemsChange(items.filter((_, index) => !indexes.has(index)));
        setSelectedItems(new Set());
    };
    return (_jsxs("div", { className: "flex flex-col gap-2 pt-4", children: [_jsx(Label, { children: label }), _jsxs("div", { className: "flex flex-col gap-0 overflow-hidden rounded-xl border-2 p-1", children: [_jsxs("div", { className: "flex gap-1", children: [_jsx(Input, { value: inputValue, onChange: (event) => setInputValue(event.target.value), onKeyDown: (event) => {
                                    if (event.key === "Enter")
                                        addItem();
                                } }), _jsx(Button, { onClick: addItem, children: "Add item" })] }), _jsx("div", { className: "flex flex-col gap-0", children: items.map((item, index) => {
                            const labelId = `${id}-${index}`;
                            const selected = selectedItems.has(index);
                            const deletingSelectedItems = selectedItems.size > 1;
                            return (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { render: _jsxs("div", { className: "grid grid-cols-[auto_auto_1fr] items-center gap-2 border-b px-1 py-2 last:border-b-0", children: [_jsx(Checkbox, { id: labelId, checked: selected, onCheckedChange: (checked) => setSelectedItems((previous) => {
                                                        const nextSelected = new Set(previous);
                                                        if (checked)
                                                            nextSelected.add(index);
                                                        else
                                                            nextSelected.delete(index);
                                                        return nextSelected;
                                                    }) }), _jsx(Label, { htmlFor: labelId, children: String(item) }), _jsx("div", {})] }) }), _jsx(ContextMenuContent, { children: _jsx(ContextMenuItem, { variant: "destructive", onClick: () => deleteItems(deletingSelectedItems
                                                ? selectedItems
                                                : new Set([index])), children: deletingSelectedItems ? "Delete Selected" : "Delete" }) })] }, `${String(item)}-${index}`));
                        }) })] })] }));
}
export { EditableList, LabeledSwitch };
