import { r as registerInstance, h, c as getElement } from './index-f5364a73.js';

// Temporary translations
const TRANSLATIONS = {
    match: {
        and: 'Alle',
        or: 'Een'
    },
    matchParagraph: {
        and: 'onderstaande condities zijn waar',
        or: 'van de onderstaande condities is waar'
    },
    check: {
        is: 'is',
        'is-before': 'is voor',
        'is-after': 'is na',
        'is-on-or-before': 'is op of voor',
        'is-on-or-after': 'is op of na',
        'is-empty': 'is leeg',
        'is-not-empty': 'is niet leeg',
        equals: 'is gelijk aan',
        'not-equals': 'is niet gelijk aan',
        contains: 'bevat',
        'not-contains': 'bevat niet',
        'starts-with': 'begint met',
        'not-starts-with': 'begint niet met',
        'ends-with': 'eindigd met',
        'not-ends-with': 'eindigd niet met'
    }
};
const Condition = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        var _a;
        this.template = [
            { name: 'date', label: 'Date', input: 'date' }
        ];
        this.value = {
            match: 'and',
            condition: [
                { data: ((_a = this.template[0]) === null || _a === void 0 ? void 0 : _a.name) || '', property: '', check: '', value: '' }
            ]
        };
        this.handleAddCondition = () => {
            const condition = [...this.value.condition, this.createRow()];
            const update = Object.assign(Object.assign({}, this.value), { condition });
            this.set(update);
        };
        // private handleAddGroup = () => {
        //   const condition = [...this.value.condition, this.createGroup()];
        //   const update = { ...this.value, condition };
        //   this.set(update);
        // };
        this.handleRemoveCondition = (_, path) => {
            const update = this.remove(path, this.value);
            this.set(update);
        };
        this.handleInput = (event, path, name) => {
            const select = event.target;
            const value = select.value || '';
            const update = this.update(path, { [name]: value }, this.value);
            this.set(update);
        };
    }
    // private createGroup(): ConditionGroup {
    //   return { match: 'and', condition: [this.createRow()] };
    // }
    createRow() {
        var _a;
        return {
            data: ((_a = this.template[0]) === null || _a === void 0 ? void 0 : _a.name) || '',
            property: '',
            check: '',
            value: ''
        };
    }
    remove(path, current) {
        if (!path.length)
            return current;
        const index = path[0];
        const next = current.condition[index];
        const condition = [...current.condition];
        if (path.length === 1 || !this.isGroup(next))
            condition.splice(index, 1);
        else
            condition[index] = this.remove(path.slice(1), next);
        return Object.assign(Object.assign({}, current), { condition });
    }
    set(value) {
        this.value = value;
        const event = new Event('input', { bubbles: true, composed: true });
        this.el.dispatchEvent(event);
    }
    update(path, value, current) {
        if (!path.length || !this.isGroup(current))
            return Object.assign(Object.assign({}, current), value);
        const index = path[0];
        const next = current.condition[index];
        const condition = [...current.condition];
        condition[index] = this.update(path.slice(1), value, next);
        return Object.assign(Object.assign({}, current), { condition });
    }
    isGroup(c) {
        return 'condition' in c;
    }
    renderCheck(row, path, type) {
        let checks = [];
        switch (type) {
            case 'date':
                checks = [
                    'is',
                    'is-before',
                    'is-after',
                    'is-on-or-before',
                    'is-on-or-after',
                    'is-empty',
                    'is-not-empty'
                ];
                break;
            default:
                checks = [
                    'equals',
                    'not-equals',
                    'contains',
                    'not-contains',
                    'starts-with',
                    'not-starts-with',
                    'ends-with',
                    'not-ends-with',
                    'is-empty',
                    'is-not-empty'
                ];
                break;
        }
        return (h("bce-select", { key: row.data, type: "dropdown", value: row.check, onInput: e => this.handleInput(e, path, 'check') }, checks.map(check => (h("bce-option", { value: check }, TRANSLATIONS.check[check])))));
    }
    renderInput(row, path, template) {
        if (!template)
            return;
        const type = typeof template === 'string' ? template : template.type;
        switch (type) {
            // case 'dropdown':
            //   return [
            //     this.renderCheck(row, path, type),
            //     <bce-select
            //       type={type}
            //       value={row.value}
            //       onInput={e => this.handleInput(e, path, 'value')}
            //     />
            //   ];
            default:
                return [
                    this.renderCheck(row, path, type),
                    h("bce-input", { type: type, value: row.value, onInput: e => this.handleInput(e, path, 'value') })
                ];
        }
    }
    renderProperty(row, path, template) {
        if (!(template === null || template === void 0 ? void 0 : template.length))
            return;
        const current = template.find(i => i.name === row.property);
        return [
            h("bce-select", { key: row.data, type: "dropdown", value: row.property, onInput: e => this.handleInput(e, path, 'property') }, template.map(v => (h("bce-option", { value: v.name }, v.label)))),
            current && this.renderInput(row, path, current.input)
        ];
    }
    renderRow(row, path, deletable) {
        const template = this.template.find(t => t.name === row.data);
        return (h("li", { key: path.join('-') + '-' + row.data }, h("bce-select", { type: "dropdown", value: row.data, onInput: e => this.handleInput(e, path, 'data') }, this.template.map(v => (h("bce-option", { value: v.name }, v.label || v.name)))), this.renderProperty(row, path, template === null || template === void 0 ? void 0 : template.property), this.renderInput(row, path, template === null || template === void 0 ? void 0 : template.input), deletable && (h("bce-menu", null, h("bce-button", { icon: "fas:trash", onClick: e => this.handleRemoveCondition(e, path) }, "Remove")))));
    }
    renderGroup(group, path) {
        const classes = { multiple: group.condition.length > 1 };
        return (h("ul", { class: classes }, group.condition.length > 1 && (h("header", null, h("bce-select", { type: "dropdown", value: group.match, onInput: e => this.handleInput(e, path, 'match') }, h("bce-option", { value: "and" }, TRANSLATIONS.match.and), h("bce-option", { value: "or" }, TRANSLATIONS.match.or)), h("p", null, TRANSLATIONS.matchParagraph[group.match]))), group.condition.map((row, i) => this.isGroup(row)
            ? this.renderGroup(row, [...path, i])
            : this.renderRow(row, [...path, i], group.condition.length > 1)), h("footer", null, h("bce-button", { design: "text", icon: "fas:plus", onClick: this.handleAddCondition }, "Conditie Toevoegen"))));
    }
    render() {
        return [
            this.renderGroup(this.value, [])
            // Temporary state preview
            // <br />,
            // <bce-code
            //   language="js"
            //   value={JSON.stringify(this.state, undefined, 2)}
            //   key={JSON.stringify(this.state)}
            // />
        ];
    }
    get el() { return getElement(this); }
    static get style() { return ":host{position:relative;margin:20px 0}:host ul{margin:0;padding-left:0}:host ul header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host ul header bce-select{width:80px}:host ul header p{margin:0 10px}:host ul ul{padding-left:82px}:host ul li{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host ul.multiple li{margin-left:82px}:host ul.multiple footer{margin-left:82px}:host bce-input,:host bce-select{margin:2px}"; }
};

export { Condition as bce_condition };
