import { h } from "@stencil/core";
import { appendChild, issuesAt, wrapNegated, } from "./rule-operations";
import { IssuesView, RuleNodeView, } from "./rule-editor-views";
import { nodeClasses } from "./view-helpers";
import { extractRef, GroupChipsView } from "./chip-picker-view";
export const GroupNodeView = ({ node, path, isNegated, ctx }) => {
    const groupBasePath = isNegated ? [...path, 'rule'] : path;
    const issuesHere = isNegated
        ? [
            ...issuesAt(ctx.issues, path),
            ...issuesAt(ctx.issues, groupBasePath),
        ]
        : issuesAt(ctx.issues, path);
    const chipChildren = [];
    const nestedGroups = [];
    for (const [index, child] of node.rules.entries()) {
        const extracted = extractRef(child);
        if (extracted) {
            chipChildren.push(Object.assign(Object.assign({}, extracted), { index }));
        }
        else {
            nestedGroups.push({ child, index });
        }
    }
    const options = combinatorOptions(ctx);
    const selectedCombinator = options.find((option) => option.value === node.type);
    return (h("div", { class: nodeClasses(node.type, issuesHere), key: pathKey(path) }, h("div", { class: "rule-node__header" }, h("limel-select", { class: "rule-node__combinator-select", value: selectedCombinator, options: options, disabled: !ctx.isMutable, onChange: combinatorChangeHandler(node, path, isNegated, ctx) }), renderMutableGroupActions(node, path, isNegated, ctx)), h("div", { class: "rule-node__body" }, h(IssuesView, { issues: issuesHere }), h(GroupChipsView, { groupNode: node, groupPath: groupBasePath, chipChildren: chipChildren, ctx: ctx }), renderNestedGroups(nestedGroups, groupBasePath, ctx), renderAddGroupFooter(node, path, isNegated, ctx))));
};
function pathKey(path) {
    return path.length === 0 ? 'root' : path.join('/');
}
function combinatorOptions(ctx) {
    return [
        {
            value: 'all',
            text: ctx.translator.get('webclient.rule-editor.combinator.all'),
        },
        {
            value: 'any',
            text: ctx.translator.get('webclient.rule-editor.combinator.any'),
        },
    ];
}
function renderMutableGroupActions(node, path, isNegated, ctx) {
    if (!ctx.isMutable) {
        return null;
    }
    return (h("div", { class: "rule-node__header-actions" }, h("limel-switch", { class: "rule-node__negate-switch", label: ctx.translator.get('webclient.rule-editor.negate'), value: isNegated, onChange: negateGroupHandler(node, path, ctx) }), h("limel-icon-button", { icon: "trash", label: ctx.translator.get('webclient.rule-editor.delete'), onClick: () => ctx.onDelete(path) })));
}
function renderNestedGroups(nestedGroups, groupBasePath, ctx) {
    if (nestedGroups.length === 0) {
        return null;
    }
    return (h("div", { class: "rule-node__children" }, nestedGroups.map((entry) => (h(RuleNodeView, { node: entry.child, path: [...groupBasePath, 'rules', entry.index], ctx: ctx })))));
}
function renderAddGroupFooter(node, path, isNegated, ctx) {
    if (!ctx.isMutable) {
        return null;
    }
    return (h("div", { class: "rule-node__footer" }, h("limel-button", { icon: "add", label: ctx.translator.get('webclient.rule-editor.add-nested-group'), onClick: addGroupHandler(node, path, isNegated, ctx) })));
}
function replaceGroup(nextGroup, path, isNegated, ctx) {
    ctx.onReplaceNode(path, wrapNegated(nextGroup, isNegated));
}
const combinatorChangeHandler = (node, path, isNegated, ctx) => (event) => {
    event.stopPropagation();
    const newType = event.detail.value;
    if (newType !== node.type) {
        replaceGroup(Object.assign(Object.assign({}, node), { type: newType }), path, isNegated, ctx);
    }
};
const addGroupHandler = (node, path, isNegated, ctx) => () => {
    const expanded = appendChild(node, { type: 'all', rules: [] });
    replaceGroup(expanded, path, isNegated, ctx);
};
const negateGroupHandler = (node, path, ctx) => (event) => {
    event.stopPropagation();
    ctx.onReplaceNode(path, wrapNegated(node, event.detail));
};
