'use strict';

import * as chai from 'chai';
import {getDocument} from "../../../source/dom/util.mjs";
import {chaiDom} from "../../util/chai-dom.mjs";
import {initJSDOM} from "../../util/jsdom.mjs";


let expect = chai.expect;
chai.use(chaiDom);

// let html1 = `
//     <div id="scripthost">
//     </div>
//    
//     <div>
//     <
// </div>
// `;


// defined in constants.mjs
// const updaterSymbolKey = "@schukai/monster/dom/custom-element@@options-updater-link"
// const updaterSymbolSymbol = Symbol.for(updaterSymbolKey);



describe('DOM', function () {

    let CustomElement, registerCustomElement, TestComponent, document, TestComponent2,assignUpdaterToElement;

    describe('initFromScriptHost()', function () {

        const randomTagNumber = "monster-test"+Math.floor(Math.random() * 1000000);
        
        before(function (done) {
            initJSDOM().then(() => {

                import("../../../source/dom/customelement.mjs").then((m) => {

                    try {
                        CustomElement = m['CustomElement'];
                        registerCustomElement = m['registerCustomElement'];

                        TestComponent2 = class extends CustomElement {
                            static getTag() {
                                return randomTagNumber;
                            }

                            /**
                             *
                             * @return {Object}
                             */
                            get defaults() {

                                return Object.assign({}, super.defaults, {
                                    test: 0,
                                    templates: {
                                        main: '<h1></h1><article><p>test</p><div id="container"></div></article>'
                                    },
                                })
                            }

                        }

                        registerCustomElement(TestComponent2)

                        document = getDocument();
                        done()
                    } catch (e) {
                        done(e);
                    }


                }).catch((e) => {
                    done(e);
                });

            });
        })

        afterEach(() => {
            let mocks = document.getElementById('mocks');
            mocks.innerHTML = "";
        })

        describe('call callback', function () {
            it('should not found callback and add error attribute', function () {

                let mocks = document.getElementById('mocks');
                mocks.innerHTML = `<div id="call-back-host"></div><div id="container"></div>`;
                
                let control = document.createElement(randomTagNumber);
                control.setAttribute('data-monster-script-host', "call-back-host");
                document.getElementById('container').appendChild(control);
                expect(control.getOption('test')).is.eql(0);
                expect(control.hasAttribute('data-monster-error')).is.true;

            });
            
            it('should found callback initCustomControlCallback', function () {

                let mocks = document.getElementById('mocks');
                mocks.innerHTML = `<div id="call-back-host"></div><div id="container"></div>`;
                
                const container = document.getElementById('call-back-host');
                container.initCustomControlCallback = function (control) {
                    control.setOption('test', 1);
                }
                
                let control = document.createElement(randomTagNumber);
                control.setAttribute('data-monster-script-host', "call-back-host");
                document.getElementById('container').appendChild(control);
                expect(control.getOption('test')).is.eql(1);
                expect(control.hasAttribute('data-monster-error')).is.false;

            });
            
            it('should found callback initCustomControlCallback from self', function () {

                let mocks = document.getElementById('mocks');
                mocks.innerHTML = `<div id="call-back-host"></div><div id="container"></div>`;

                let control = document.createElement(randomTagNumber);
                expect(control.getOption('test')).is.eql(0);
                control.initCustomControlCallback = function (control) {
                    control.setOption('test', 2);
                }
                
                control.setAttribute('data-monster-script-host', "call-back-host");
                document.getElementById('container').appendChild(control);
                expect(control.getOption('test')).is.eql(2);
                expect(control.hasAttribute('data-monster-error')).is.false;

            });

            it('should resolve callback hosts from a comma separated list', function () {
                let mocks = document.getElementById('mocks');
                mocks.innerHTML = `
                    <div id="call-back-host-1"></div>
                    <div id="call-back-host-2"></div>
                    <div id="container"></div>
                `;

                const container = document.getElementById('call-back-host-2');
                container.initCustomControlCallback = function (control) {
                    control.setOption('test', 3);
                }

                let control = document.createElement(randomTagNumber);
                control.setAttribute('data-monster-script-host', "call-back-host-1,call-back-host-2");
                document.getElementById('container').appendChild(control);

                expect(control.getOption('test')).is.eql(3);
                expect(control.hasAttribute('data-monster-error')).is.false;
            });
        })

    });
})
