import React, { useState } from "react";
import { XMarkIcon } from "@navikt/aksel-icons";
import { ActionMenu } from "../../action-menu/index.js";
import { Popover } from "../../popover/index.js";
function TokenFilterChips(props) {
    const { tokens, removeToken, operation, updateOperation } = props;
    if (tokens.length === 0) {
        return null;
    }
    return (React.createElement("ul", { className: "aksel-property-filter__chips" }, tokens.map((token, index) => (React.createElement(TokenFilterChip, { key: index, onRemove: () => removeToken(index), token: token, showOperation: index > 0, operation: operation, updateOperation: updateOperation })))));
}
function TokenFilterChip(props) {
    const { token, onRemove, showOperation, operation } = props;
    const [popupAnchor, setPopupAnchor] = useState(null);
    const [isPopupOpen, setIsPopupOpen] = useState(false);
    return (React.createElement("li", { className: "aksel-property-filter__chip" },
        showOperation && (React.createElement(ActionMenu, null,
            React.createElement(ActionMenu.Trigger, null,
                React.createElement("button", { className: "aksel-property-filter__chip-button", "data-type": "operation" }, operation === "and" ? "og" : "eller")),
            React.createElement(ActionMenu.Content, null,
                React.createElement(ActionMenu.Item, { onSelect: () => { var _a; return (_a = props.updateOperation) === null || _a === void 0 ? void 0 : _a.call(props, "and"); } }, "AND"),
                React.createElement(ActionMenu.Item, { onSelect: () => { var _a; return (_a = props.updateOperation) === null || _a === void 0 ? void 0 : _a.call(props, "or"); } }, "OR")))),
        React.createElement("button", { "data-type": "value", className: "aksel-property-filter__chip-button", ref: setPopupAnchor, onClick: () => setIsPopupOpen((open) => !open) }, `${token.propertyKey} ${token.operator} ${token.value}`),
        React.createElement(Popover, { open: isPopupOpen, onClose: () => setIsPopupOpen(false), anchorEl: popupAnchor, placement: "bottom-start" },
            React.createElement(Popover.Content, null, "Edit filter")),
        React.createElement("button", { "data-type": "remove", className: "aksel-property-filter__chip-button", onClick: onRemove },
            React.createElement(XMarkIcon, { "aria-hidden": true, fontSize: "1.25rem" }))));
}
export { TokenFilterChips };
//# sourceMappingURL=FilterChip.js.map