import { DOM, configure, template, bindable, MF, customElement, containerfree, valueConverter } from 'mframejs';
import { JSDOM } from 'jsdom';


// our dummy app to simplify parts
export class App {
    public bindedName = 'superman';
    public rows = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    private count = this.rows.length;

    public loadTemplate() {
        return template`
            <!-- helper buttons -->
            <button class="inputs" click.trigger="reverse()">reverse</button>
            <button class="inputs" click.trigger="shift()">shift</button>
            <button class="inputs" click.trigger="pop()">pop</button>
            <button class="inputs" click.trigger="push()">push</button>

            <!-- test repeat on row with containerless custom element-->
            <template repeat.for="$row of rows">
            <br>
            This is index no @{$index}
            <br>
                <hello name.bind="bindedName + ':' +$row"></hello>
                <br>
            </template>
        `;
    }

    public reverse() {
        this.rows.reverse();
    }

    public push() {
        this.rows.push(this.count++);
    }

    public pop() {
        this.rows.pop();
    }

    public shift() {
        this.rows.shift();
    }


}


@containerfree()
@customElement('hello')
export class HelloElement {
    @bindable() public name = 'unknown';

    public loadTemplate() {
        return '<template><p class="inner">Hello ${name | uppercase}</p></template>';
    }

}



@valueConverter('uppercase')
export class UppercaseConverter {
    public toView(arg: any) {
        if (typeof arg === 'string') {
            return arg.charAt(0).toUpperCase() + arg.slice(1);
        } else {
            return arg;
        }
    }
}


describe('template with repeat and values 1', () => {


    beforeAll(() => {
        const window = new JSDOM('').window;
        DOM.setConfig(window, window.document);
        configure(App).then((mf: MF) => {
            mf.start(DOM.document.body);
        });

    });


    it('default starts with list/buttons', async () => {
        await DOM.waitFor(0);
        // const input = DOM.document.getElementsByClassName('inputs');
        expect(DOM.document.body.children.length).toBe(40);
    });

    it('check if we have correct num of custom elements', async () => {
        const inner = DOM.document.getElementsByClassName('inner');
        expect(inner.length).toBe(9);
    });

    it('check first element', async () => {
        const inner = DOM.document.getElementsByClassName('inner');
        expect(inner[0].innerHTML).toBe('Hello Superman:1');
    });

    it('reverse and test again', async () => {
        const input = DOM.document.getElementsByClassName('inputs');
        const event = new (DOM.window as any).CustomEvent('click');
        (input[0]).dispatchEvent(event);
        await DOM.waitFor(0);
        const inner = DOM.document.getElementsByClassName('inner');
        expect(inner[0].innerHTML).toBe('Hello Superman:9');
    });



});