import { DOM, IBindingContext, createBindingContext } from 'mframejs';
import { JSDOM } from 'jsdom';
import { CssAttribute } from '../../../src/mframejs/attribute/cssAttribute';

let attribute: CssAttribute, bindingContext: IBindingContext;

describe('cssAttribute', () => {


    beforeAll(() => {
        const window = new JSDOM('').window;
        DOM.setConfig(window, window.document);
        DOM.document.body.innerHTML = '<div css.bind="background"><div>';
        attribute = new CssAttribute();
        bindingContext = createBindingContext({
            background: 'background-color:blue'
        });
        attribute.$bindingContext = bindingContext;
        attribute.$element = (DOM.document as any).body.firstChild;
        attribute.$attribute = (DOM.document as any).body.firstChild.getAttributeNode('css.bind');

    });


    it('call created', () => {
        expect(attribute.created()).toBe(undefined);
    });


    it('test if background color is set', () => {
        const backgroundColor = (DOM.document as any).body.firstChild.style['background-color'];
        expect(backgroundColor).toBe('blue');
    });


    it('set new background color', async () => {
        bindingContext.$context.background = 'background-color:green';
        // need to wait binding system to finish

        const backgroundColor = (DOM.document as any).body.firstChild.style['background-color'];
        expect(backgroundColor).toBe('green');

    });


    it('set color, test if if set and old is removed', async () => {
        bindingContext.$context.background = 'color:blue';

        const backgroundColor = (DOM.document as any).body.firstChild.style['background-color'];
        const color = (DOM.document as any).body.firstChild.style['color'];
        expect(backgroundColor + color).toBe('' + 'blue');
    });


    it('change color and background to ""', async () => {
        bindingContext.$context.background = 'background-color:; color:';

        const backgroundColor = (DOM.document as any).body.firstChild.style['background-color'];
        const color = (DOM.document as any).body.firstChild.style['color'];
        expect(backgroundColor + color).toBe('');
    });


    it('set color and background', async () => {
        bindingContext.$context.background = 'background-color:blue;color:green';

        const backgroundColor = (DOM.document as any).body.firstChild.style['background-color'];
        const color = (DOM.document as any).body.firstChild.style['color'];
        expect(backgroundColor + color).toBe('blue' + 'green');
    });


    it('set null value', async () => {
        bindingContext.$context.background = null;

        const backgroundColor = (DOM.document as any).body.firstChild.style['background-color'];
        const color = (DOM.document as any).body.firstChild.style['color'];
        expect(backgroundColor + color).toBe('' + '');
    });


    it('set color and background', async () => {
        bindingContext.$context.background = 'background-color:blue;color:green';

        const backgroundColor = (DOM.document as any).body.firstChild.style['background-color'];
        const color = (DOM.document as any).body.firstChild.style['color'];
        expect(backgroundColor + color).toBe('blue' + 'green');
    });


    it('set undefined value', async () => {
        bindingContext.$context.background = null;

        const backgroundColor = (DOM.document as any).body.firstChild.style['background-color'];
        const color = (DOM.document as any).body.firstChild.style['color'];
        expect(backgroundColor + color).toBe('' + '');
    });


    it('set color and background', async () => {
        bindingContext.$context.background = 'background-color:blue;color:green';

        const backgroundColor = (DOM.document as any).body.firstChild.style['background-color'];
        const color = (DOM.document as any).body.firstChild.style['color'];
        expect(backgroundColor + color).toBe('blue' + 'green');
    });



    it('set object and see if value stays unchanged', async () => {
        bindingContext.$context.background = {};

        const backgroundColor = (DOM.document as any).body.firstChild.style['background-color'];
        const color = (DOM.document as any).body.firstChild.style['color'];
        expect(backgroundColor + color).toBe('blue' + 'green');
    });


    it('set random string (will remove old values set by it)', async () => {
        bindingContext.$context.background = 'testing is fun';

        const backgroundColor = (DOM.document as any).body.firstChild.style['background-color'];
        const color = (DOM.document as any).body.firstChild.style['color'];
        expect(backgroundColor + color).toBe('' + '');
    });



    it('detach', async () => {
        attribute.detached();
    });



});