import {getGlobal} from "../../../../source/types/global.mjs";
import * as chai from 'chai';
import {chaiDom} from "../../../util/chai-dom.mjs";
import {initJSDOM} from "../../../util/jsdom.mjs";
import {Datasource} from "../../../../source/data/datasource.mjs";
import {Processing} from "../../../../source/util/processing.mjs";

import {storageObjectSymbol} from "../../../../source/data/datasource/storage.mjs";

let expect = chai.expect;
chai.use(chaiDom);
//
// let html1 = `
//     <div id="test1">
//     <monster-form id="form1"></monster-form>
//     </div>
// `;
//
// let html2 = `<div id="test2">
//
//     <monster-datasource-dom id="datasourceXdrfr">
//         <script type="application/json">
//             [
//                 {
//                     "id": 1,
//                     "username": "martin89",
//                     "email": "elena.richards@domain.com",
//                     "full_name": "Elena Richards",
//                     "age": 29,
//                     "country": "Greece",
//                     "registered_date": "2019-11-23",
//                     "status": "active"
//                 }
//             ]
//         </script>
//     </monster-datasource-dom>
//
//
//     <monster-form id="form2Drfa2"
//                   data-monster-option-mapping-data=""
//                   data-monster-option-datasource-selector="#datasourceXdrfr">
//         <div>
//             <div>
//                 <input name="control1"
//                        id="control1"
//                        data-monster-bind="path:data.full_name">
//             </div>
//         </div>
//         <div>
//             <input name="control2"
//                    data-monster-bind="path:data.status">
//         </div>
//
//     </monster-form>
// </div>
// `;
//
// describe('Form', function () {
//
//     let form;
//     let testMock
//
//     before(function (done) {
//
//         import("element-internals-polyfill").catch(e => done(e));
//
//         initJSDOM().then((x) => {
//             import("../../../../source/components/form/form.mjs").then((m) => {
//                 form = m['Form'];
//                 done()
//             }).catch(e => done(e))
//         });
//
//     })
//
//     beforeEach(() => {
//         // add mock vontainer to body
//         testMock = document.createElement('div');
//         testMock.id = 'mocksR523';
//         testMock.style.position = 'absolute';
//         testMock.style.top = '-10000px';
//         testMock.style.left = '-10000px';
//         document.body.appendChild(testMock);
//     })
//
//     afterEach(() => {
//         let mocks = document.getElementById('mocks');
//         mocks.innerHTML = "";
//         localStorage.removeItem('test-key')
//         document.body.removeChild(testMock);
//
//     })
//
//     describe('HTML-Templates', function () {
//
//         describe('create from template html1', function () {
//             beforeEach(() => {
//                 let mocks = document.getElementById('mocks');
//                 mocks.innerHTML = html1;
//                 localStorage.setItem('test-key', '{}')
//             });
//
//             it('should contains monster-form', function () {
//                 expect(document.getElementById('test1')).contain.html('<monster-form');
//             });
//
//
//         });
//
//         describe('create from template html2', function () {
//
//             beforeEach((done) => {
//                 localStorage.setItem('test-key', JSON.stringify({
//                     a: true,
//                     b: 7,
//                     c: [1, 5, 6],
//                     d: {
//                         e: true
//                     }
//                 }))
//                 let mocks = document.getElementById('mocks');
//
//                 try {
//                     mocks.innerHTML = html2;
//                     done();
//                 } catch (e) {
//                     done(e);
//                 }
//
//             });
//
//             it('should contains monster-form', function () {
//
//                 let mocks = document.getElementById('mocks');
//                 mocks.innerHTML = html2;
//
//                 expect(document.getElementById('test2')).contain.html('<monster-form');
//             });
//
//             it('should click', function (done) {
//
//                 let mocks = document.getElementById('mocks');
//                 mocks.innerHTML = html2;
//
//                 expect(document.getElementById('test2')).contain.html('<monster-form');
//
//                 console.log(document.getElementById('test2').innerHTML)
//
//                 const form = document.getElementById('form2Drfa2');
//
//
//                 setTimeout(() => {
//
//                     if (!form.shadowRoot) {
//                         return done(new Error('no shadowRoot'))
//                     }
//
//                     const control1 = form.shadowRoot.querySelector('slot').assignedElements()[0].querySelector('input')
//                     if (!control1) {
//                         return done(new Error('no control1'))
//                     }
//
//                     control1.click();
//
//
//                     done();
//                 }, 2)
//
//             });
//
//
//         });
//
//
//     })
//
// })
