function zipWith(fn, ...args) {
    const minLen = Math.min(...args.map(x => x.length));
    const res = [];

    for (let x = 0; x < minLen; x++) {
        res.push(fn(...args.map(a => a[x])));
    }

    return res;
}

const gf = GenericFunction(
    "foobar", ["a", "b"]
).before(
    [Object, Array], function (a,b) {console.log('in before', this.next_method_p);} 
).primary(
    [Object, Array], function (a,b) {
        console.info('next_result: ', this.call_next_method(), this.next_method_p);
        return [a,...b];
    } 
).primary(
    [Object, Object], function (thing, single) {
        console.log("hello from previous method", this.next_method_p);
        return [thing, single];
    }
).after(
    [Number, Array], function (a,b) {console.log(`in after for ${a}`, this.next_method_p);} 
).fn;

function groupGFMessages(gf) {
    return gf.method([around_qualifier], [Object,Object], function(a,b) {
        console.groupCollapsed(gf.name);
        try {
            return this.call_next_method();
        } finally {
            console.groupEnd();
        }
    })
}

groupGFMessages(gf.gf);

console.log(gf(2,["asdf"]));

const gf2 = GenericFunction(
    "another", ["a"]
).primary(
    [Object], function (a) { return {value: a}; }
).method(
    [around_qualifier], [Number], function(thing) {
        console.log('before next method in number around');
        const val = this.call_next_method();
        console.log('after next method in number around', val);
        return {was_num: true, ...val};
    }
).method(
    [around_qualifier], [Object], function(thing) {
        console.log('before next method in generic around');
        const val = this.call_next_method();
        console.log('after next method in generic around', val);
        return {was_obj: true, ...val};
    }
);

function MyStore() {
    this.name = 'foo';
    this.address = '1234 asdfadfd'
}

class NameField extends HTMLElement {constructor() {
    super()
    const style = document.createElement('style');
    this.appendChild(style);
}}
customElements.define('the-name', NameField);

class AddressField extends HTMLElement {
    constructor() { super() }
}
customElements.define('the-address', AddressField);

const renderFn = defgeneric(
    "dorender", ["component", "el"]
).primary(
    [MyStore, NameField], function (comp, heading) {
        console.log('heading el', this.next_method_p);
        heading.textContent = comp.name;
    }
).primary(
    [MyStore, AddressField], function (comp, el) {
        console.log('address el', this.next_method_p);
        el.textContent = comp.address;
    }
).primary(
    [MyStore, HTMLElement], function (comp, el) {
        console.log('HtmlElement el ', el, this.next_method_p);
        renderFn.fn(comp, el.querySelector('the-name'));
        renderFn.fn(comp, el.querySelector('the-address'));
    }
).before(
    [Object, HTMLElement], function (_, el) {
        console.log('has next? ', this.next_method_p)
    }
);

renderFn.fn(new MyStore(), document.querySelector('section'));