import * as chai from "chai";
import { getGlobal } from "../../../../source/types/global.mjs";
import { chaiDom } from "../../../util/chai-dom.mjs";
import { initJSDOM } from "../../../util/jsdom.mjs";

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

const global = getGlobal();

// language=html
const html1 = `
    <monster-panel id="my-panel">

    </monster-panel>
`;

describe("SplitScreen", () => {
	before((done) => {
		initJSDOM().then(() => {
			import("element-internals-polyfill").catch((e) => done(e));

			const promises = [];

			if (!global.crypto) {
				promises.push(
					import("@peculiar/webcrypto").then((m) => {
						const Crypto = m.Crypto;
						global.crypto = new Crypto();
					}),
				);
			}

			promises.push(import("../../../../source/components/layout/panel.mjs"));

			Promise.all(promises)
				.then(() => {
					done();
				})
				.catch((e) => done(e));
		});
	});

	describe("document.createElement()", () => {
		afterEach(() => {
			const mocks = document.getElementById("mocks");
			mocks.innerHTML = "";
		});

		it("should have buttons and SplitScreen", (done) => {
			const mocks = document.getElementById("mocks");
			mocks.innerHTML = html1;

			setTimeout(() => {
				try {
					const splitScreen = document.getElementById("my-panel");
					expect(splitScreen).is.instanceof(HTMLElement);

					setTimeout(() => {
						const div = splitScreen.shadowRoot.querySelector("div");
						expect(div.hasChildNodes()).to.be.true;
						done();
					}, 100);
				} catch (e) {
					return done(e);
				}
			}, 0);
		});

		it("should expose and apply the calculated maximum height", (done) => {
			const mocks = document.getElementById("mocks");
			mocks.innerHTML = html1;

			setTimeout(() => {
				try {
					const panel = document.getElementById("my-panel");
					panel.setOption("heightAdjustment", 8);
					panel.getBoundingClientRect = () => ({ top: 120 });

					Object.defineProperty(window, "innerHeight", {
						value: 720,
						configurable: true,
					});

					const height = panel.getMaximumHeight();

					expect(height).to.equal(608);
					expect(panel.recalculateHeight()).to.equal(panel);
					expect(panel.style.height).to.equal("608px");
					done();
				} catch (e) {
					return done(e);
				}
			}, 0);
		});
	});
});
