import { DOM, configure, IElement, ContainerClasses } from 'mframejs';
import { JSDOM } from 'jsdom';

// our dummy app to simplify parts
export class App implements IElement {

    public productsObject = [
        { id: 0, name: 'cola' },
        { id: 1, name: 'pepsi' },
        { id: 2, name: 'fanta' }
    ];
    public selectedProductStrings: string[] = [null];

    public loadTemplate() {
        return `
        <template>
            <label>
            <br>
                Selected product
            <br>
                <select class="options" multiple value.bind="selectedProductStrings">
                    <option class="options" model.bind="null"> None </option>
                    <option class="options" repeat.for="product of productsObject" model.bind="product.name">
                        @{product.name}
                    </option>
                </select>
            </label>
            <br>
            <div class="selected">Selected product: @{selectedProductStrings}</div>
        </template>`;
    }
}


describe('radio group with just repeat with values null', () => {


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

    });


    it('check default values are set (null/none)', async () => {

        const input = DOM.document.getElementsByClassName('options');
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: ');
        expect((input[0] as any).value).toBe('None');
    });


    it('check "cola" values are set', async () => {
        const app: App = ContainerClasses.get(App);
        app.selectedProductStrings = ['cola'];
        await DOM.waitFor(0);
        const input = DOM.document.getElementsByClassName('options');
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: cola');
        expect((input[0] as any).value).toBe('cola');

    });


    it('check "pepsi" values are set', async () => {
        const app: App = ContainerClasses.get(App);
        app.selectedProductStrings = ['pepsi'];
        await DOM.waitFor(0);
        const input = DOM.document.getElementsByClassName('options');
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: pepsi');
        expect((input[0] as any).value).toBe('pepsi');

    });


    it('check "fanta" values are set', async () => {
        const app: App = ContainerClasses.get(App);
        app.selectedProductStrings = ['fanta'];
        await DOM.waitFor(0);
        const input = DOM.document.getElementsByClassName('options');
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: fanta');
        expect((input[0] as any).value).toBe('fanta');

    });


    it('check "unknow" dont edit value', async () => {
        const app: App = ContainerClasses.get(App);
        app.selectedProductStrings = ['unknown'];
        await DOM.waitFor(0);
        const input = DOM.document.getElementsByClassName('options');
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: unknown');
        expect((input[0] as any).value).toBe('None');

    });


    it('sett back to null', async () => {
        const app: App = ContainerClasses.get(App);
        app.selectedProductStrings = [null];
        await DOM.waitFor(0);
        const input = DOM.document.getElementsByClassName('options');
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: ');
        expect((input[0] as any).value).toBe('None');

    });


    /* not sure how to test this with jsdom, justuse puppeteer?
     it('set select on cola', async () => {
        const input = DOM.document.getElementsByClassName('options');
        const change = new (DOM.window as any).CustomEvent('change', { bubbles: true });
        (input[3] as any).setAttribute('selected', null);
        (input[3] as any).dispatchEvent(change);
        const selected = DOM.document.getElementsByClassName('selected');
        expect((selected[0] as any).innerHTML).toBe('Selected product: pepsi');
        expect((input[0] as any).value).toBe('pepsi');
    }); */

});