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-split-panel id="my-split-panel">

    </monster-split-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/split-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-split-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 use the configured dragger width for vertical panel dimensions", (done) => {
			const mocks = document.getElementById("mocks");
			mocks.innerHTML = html1;

			setTimeout(() => {
				try {
					const splitPanel = document.getElementById("my-split-panel");
					const dragger = splitPanel.shadowRoot.querySelector(
						"[data-monster-role=dragger]",
					);
					const startPanel = splitPanel.shadowRoot.querySelector(
						"[data-monster-role=startPanel]",
					);
					const endPanel = splitPanel.shadowRoot.querySelector(
						"[data-monster-role=endPanel]",
					);

					dragger.style.setProperty("--monster-dragger-width", "12px");
					splitPanel.setDimension("40%");

					expect(startPanel.style.width).to.equal("40%");
					expect(endPanel.style.width).to.equal("calc(60% - 12px)");
					done();
				} catch (e) {
					return done(e);
				}
			}, 0);
		});

		it("should use the configured dragger width for horizontal panel dimensions", (done) => {
			const mocks = document.getElementById("mocks");
			mocks.innerHTML = html1;

			setTimeout(() => {
				try {
					const splitPanel = document.getElementById("my-split-panel");
					const dragger = splitPanel.shadowRoot.querySelector(
						"[data-monster-role=dragger]",
					);
					const startPanel = splitPanel.shadowRoot.querySelector(
						"[data-monster-role=startPanel]",
					);
					const endPanel = splitPanel.shadowRoot.querySelector(
						"[data-monster-role=endPanel]",
					);

					dragger.style.setProperty("--monster-dragger-width", "14px");
					splitPanel.setOption("splitType", "horizontal");
					splitPanel.setDimension("35%");

					expect(startPanel.style.height).to.equal("35%");
					expect(endPanel.style.height).to.equal("calc(65% - 14px)");
					done();
				} catch (e) {
					return done(e);
				}
			}, 0);
		});
	});
});
