const mod = require("../h3.js");
const h3 = mod.h3;
const h = mod.h;

describe("VNode", () => {
    it("should provide a from method to initialize itself from an object", () => {
        const fn = () => true;
        const obj = {
            id: "test",
            type: "input",
            value: "AAA",
            $html: "",
            data: { a: "1", b: "2" },
            eventListeners: { click: fn },
            children: [],
            props: { title: "test" },
            classList: ["a1", "a2"],
            style: "padding: 2px",
        };
        const vnode1 = h("br");
        vnode1.from(obj);
        const vnode2 = h("input#test.a1.a2", {
            value: "AAA",
            $html: "",
            data: { a: "1", b: "2" },
            onclick: fn,
            title: "test",
            style: "padding: 2px",
        });
        expect(vnode1).toEqual(vnode2);
    });

    it("should provide a render method able to render textual nodes", () => {
        const createTextNode = jest.spyOn(document, "createTextNode");
        const vnode = h({ type: "#text", value: "test" });
        const node = vnode.render();
        expect(createTextNode).toHaveBeenCalledWith("test");
        expect(node.constructor).toEqual(Text);
    });

    it("should provide a render method able to render simple element nodes", () => {
        const createElement = jest.spyOn(document, "createElement");
        const vnode = h("br");
        const node = vnode.render();
        expect(createElement).toHaveBeenCalledWith("br");
        expect(node.constructor).toEqual(HTMLBRElement);
    });

    it("should provide a render method able to render element nodes with props and classes", () => {
        const createElement = jest.spyOn(document, "createElement");
        const vnode = h("span.test1.test2", { title: "test", falsy: false });
        const node = vnode.render();
        expect(createElement).toHaveBeenCalledWith("span");
        expect(node.constructor).toEqual(HTMLSpanElement);
        expect(node.getAttribute("title")).toEqual("test");
        expect(node.classList.value).toEqual("test1 test2");
    });

    it("should provide a render method able to render element nodes with children", () => {
        const vnode = h("ul", [h("li", "test1"), h("li", "test2")]);
        const createElement = jest.spyOn(document, "createElement");
        const node = vnode.render();
        expect(createElement).toHaveBeenCalledWith("ul");
        expect(createElement).toHaveBeenCalledWith("li");
        expect(node.constructor).toEqual(HTMLUListElement);
        expect(node.childNodes.length).toEqual(2);
        expect(node.childNodes[1].constructor).toEqual(HTMLLIElement);
        expect(node.childNodes[0].childNodes[0].data).toEqual("test1");
    });

    it("should handle boolean props when redrawing", () => {
        const vnode1 = h("input", { type: "checkbox", checked: true });
        const node = vnode1.render();
        expect(node.checked).toEqual(true);
        const vnode = h("input", { type: "checkbox", checked: false });
        vnode1.redraw({ node, vnode });
        expect(node.checked).toEqual(false);
    });

    it("should handle falsy props when redrawing", () => {
        const vnode1 = h("test-element", { q: 1});
        const node = vnode1.render();
        expect(node.q).toEqual(1);
        const vnode = h("test-element", { q: 0});
        vnode1.redraw({ node, vnode });
        expect(node.q).toEqual(0);
        expect(vnode1.props.q).toEqual(0);
    });

    it("should handle non-string props as properties and not create attributes", () => {
        const v = h("div", {
            test: true,
            obj: { a: 1, b: 2 },
            arr: [1, 2, 3],
            num: 2.3,
            str: "test",
            s: "",
            title: "testing!",
            value: false,
        });
        const v2 = h("div", {
            test: true,
            obj: { a: 1, b: 2 },
            arr: [1, 2, 3],
            s: "",
            title: "testing!",
            value: "true",
        });
        const n = v.render();
        expect(n.test).toEqual(true);
        expect(n.obj).toEqual({ a: 1, b: 2 });
        expect(n.arr).toEqual([1, 2, 3]);
        expect(n.num).toEqual(2.3);
        expect(n.str).toEqual("test");
        expect(n.getAttribute("str")).toEqual("test");
        expect(n.s).toEqual("");
        expect(n.getAttribute("s")).toEqual("");
        expect(n.title).toEqual("testing!");
        expect(n.getAttribute("title")).toEqual("testing!");
        expect(n.value).toEqual(undefined);
        expect(n.getAttribute("value")).toEqual(null);
        v.redraw({ node: n, vnode: v2 });
        expect(n.getAttribute("value")).toEqual("true");
        v2.value = null;
        v.redraw({ node: n, vnode: v2 });
        expect(n.getAttribute("value")).toEqual("");
    });

    it("should provide a render method able to render element nodes with a value", () => {
        let vnode = h("input", { value: "test" });
        const createElement = jest.spyOn(document, "createElement");
        let node = vnode.render();
        expect(createElement).toHaveBeenCalledWith("input");
        expect(node.constructor).toEqual(HTMLInputElement);
        expect(node.value).toEqual("test");
        vnode = h("input", { value: null });
        node = vnode.render();
        expect(node.value).toEqual("");
        vnode = h("test", { value: 123 });
        node = vnode.render();
        expect(node.getAttribute("value")).toEqual("123");
        expect(node.value).toEqual(undefined);
    });

    it("should provide a render method able to render element nodes with event handlers", () => {
        const handler = () => {
            console.log("test");
        };
        const vnode = h("button", { onclick: handler });
        const button = document.createElement("button");
        const createElement = jest
            .spyOn(document, "createElement")
            .mockImplementationOnce(() => {
                return button;
            });
        const addEventListener = jest.spyOn(button, "addEventListener");
        const node = vnode.render();
        expect(createElement).toHaveBeenCalledWith("button");
        expect(node.constructor).toEqual(HTMLButtonElement);
        expect(addEventListener).toHaveBeenCalledWith("click", handler);
    });

    it("it should provide a render method able to render elements with special props", () => {
        const vnode = h("div", {
            id: "test",
            style: "margin: auto;",
            data: { test: "aaa" },
            $html: "<p>Hello!</p>",
        });
        const createElement = jest.spyOn(document, "createElement");
        const node = vnode.render();
        expect(createElement).toHaveBeenCalledWith("div");
        expect(node.constructor).toEqual(HTMLDivElement);
        expect(node.style.cssText).toEqual("margin: auto;");
        expect(node.id).toEqual("test");
        expect(node.dataset["test"]).toEqual("aaa");
        expect(node.childNodes[0].textContent).toEqual("Hello!");
    });

    it("should provide a redraw method that is able to add new DOM nodes", () => {
        const oldvnode = h("div#test", h("span"));
        const newvnodeNoChildren = h("div");
        const newvnode = h("div", [h("span#a"), h("span")]);
        const node = oldvnode.render();
        const span = node.childNodes[0];
        oldvnode.redraw({ node: node, vnode: newvnodeNoChildren });
        expect(oldvnode.children.length).toEqual(0);
        oldvnode.redraw({ node: node, vnode: newvnode });
        expect(oldvnode).toEqual(newvnode);
        expect(oldvnode.children.length).toEqual(2);
        expect(node.childNodes.length).toEqual(2);
        expect(node.childNodes[0].id).toEqual("a");
        expect(span).toEqual(node.childNodes[1]);
    });

    it("should provide a redraw method that is able to remove existing DOM nodes", () => {
        let oldvnode = h("div", [h("span#a"), h("span")]);
        let newvnode = h("div", [h("span")]);
        let node = oldvnode.render();
        oldvnode.redraw({ node: node, vnode: newvnode });
        expect(oldvnode).toEqual(newvnode);
        expect(oldvnode.children.length).toEqual(1);
        expect(node.childNodes.length).toEqual(1);
        oldvnode = h("div.test-children", [h("span.a"), h("span.b")]);
        node = oldvnode.render();
        newvnode = h("div.test-children", [h("div.c")]);
        oldvnode.redraw({ node: node, vnode: newvnode });
        expect(oldvnode).toEqual(newvnode);
        expect(oldvnode.children.length).toEqual(1);
        expect(node.childNodes.length).toEqual(1);
        expect(oldvnode.children[0].classList[0]).toEqual("c");
    });

    it("should provide a redraw method that is able to figure out differences in children", () => {
        const oldvnode = h("div", [h("span", "a"), h("span"), h("span", "b")]);
        const newvnode = h("div", [
            h("span", "a"),
            h("span", "c"),
            h("span", "b"),
        ]);
        const node = oldvnode.render();
        oldvnode.redraw({ node: node, vnode: newvnode });
        expect(node.childNodes[1].textContent).toEqual("c");
    });

    it("should provide a redraw method that is able to figure out differences in existing children", () => {
        const oldvnode = h("div", [
            h("span.test", "a"),
            h("span.test", "b"),
            h("span.test", "c"),
        ]);
        const newvnode = h("div", [
            h("span.test", "a"),
            h("span.test1", "b"),
            h("span.test", "c"),
        ]);
        const node = oldvnode.render();
        oldvnode.redraw({ node: node, vnode: newvnode });
        expect(node.childNodes[0].classList[0]).toEqual("test");
        expect(node.childNodes[1].classList[0]).toEqual("test1");
        expect(node.childNodes[2].classList[0]).toEqual("test");
    });

    it("should provide a redraw method that is able to update different props", () => {
        const oldvnode = h("span", { title: "a", something: "b" });
        const newvnode = h("span", { title: "b", id: "bbb" });
        const node = oldvnode.render();
        oldvnode.redraw({ node: node, vnode: newvnode });
        expect(oldvnode).toEqual(newvnode);
        expect(node.getAttribute("title")).toEqual("b");
        expect(node.getAttribute("id")).toEqual("bbb");
        expect(node.hasAttribute("something")).toEqual(false);
    });

    it("should provide a redraw method that is able to update different classes", () => {
        const oldvnode = h("span.a.b", { title: "b" });
        const newvnode = h("span.a.c", { title: "b" });
        const node = oldvnode.render();
        oldvnode.redraw({ node: node, vnode: newvnode });
        expect(oldvnode).toEqual(newvnode);
        expect(node.classList.value).toEqual("a c");
    });

    it("should provide redraw method to detect changed nodes if they have different elements", () => {
        const oldvnode = h("span.c", { title: "b" });
        const newvnode = h("div.c", { title: "b" });
        const container = document.createElement("div");
        const node = oldvnode.render();
        container.appendChild(node);
        oldvnode.redraw({ node: node, vnode: newvnode });
        expect(node).not.toEqual(container.childNodes[0]);
        expect(node.constructor).toEqual(HTMLSpanElement);
        expect(container.childNodes[0].constructor).toEqual(HTMLDivElement);
    });

    it("should provide redraw method to detect position changes in child nodes", () => {
        const v1 = h("ul", [h("li.a"), h("li.b"), h("li.c"), h("li.d")]);
        const v2 = h("ul", [h("li.c"), h("li.b"), h("li.a"), h("li.d")]);
        const n = v1.render();
        expect(n.childNodes[0].classList[0]).toEqual("a");
        v1.redraw({ node: n, vnode: v2 });
        expect(n.childNodes[0].classList[0]).toEqual("c");
    });

    it("should optimize insertion and deletions when redrawing if all old/new children exist", () => {
        const v = h("div", h("a"), h("d"));
        const vnode = h("div", h("a"), h("b"), h("c"), h("d"));
        const node = v.render();
        v.redraw({ node, vnode });
        expect(v.children.length).toEqual(4);
    });

    it("should provide redraw method to detect changed nodes if they have different node types", () => {
        const oldvnode = h("span.c", { title: "b" });
        const newvnode = h({ type: "#text", value: "test" });
        const container = document.createElement("div");
        const node = oldvnode.render();
        container.appendChild(node);
        expect(node.constructor).toEqual(HTMLSpanElement);
        oldvnode.redraw({ node: node, vnode: newvnode });
        expect(node).not.toEqual(container.childNodes[0]);
        expect(container.childNodes[0].data).toEqual("test");
    });

    it("should provide redraw method to detect changed nodes if they have different text", () => {
        const oldvnode = h({ type: "#text", value: "test1" });
        const newvnode = h({ type: "#text", value: "test2" });
        const container = document.createElement("div");
        const node = oldvnode.render();
        container.appendChild(node);
        expect(node.data).toEqual("test1");
        oldvnode.redraw({ node: node, vnode: newvnode });
        expect(container.childNodes[0].data).toEqual("test2");
    });

    it("should provide redraw method to detect changed nodes and recurse", () => {
        const oldvnode = h("ul.c", { title: "b" }, [
            h("li#aaa"),
            h("li#bbb"),
            h("li#ccc"),
        ]);
        const newvnode = h("ul.c", { title: "b" }, [h("li#aaa"), h("li#ccc")]);
        const node = oldvnode.render();
        oldvnode.redraw({ node: node, vnode: newvnode });
        expect(oldvnode).toEqual(newvnode);
        expect(node.childNodes.length).toEqual(2);
        expect(node.childNodes[0].getAttribute("id")).toEqual("aaa");
        expect(node.childNodes[1].getAttribute("id")).toEqual("ccc");
    });

    it("should provide a redraw method able to detect specific changes to style, data, value, props, $onrender and eventListeners", () => {
        const fn = () => false;
        const oldvnode = h("input", {
            style: "margin: auto;",
            data: { a: 111, b: 222, d: 444 },
            value: "Test...",
            title: "test",
            label: "test",
            onkeydown: () => true,
            onclick: () => true,
            onkeypress: () => true,
        });
        const newvnode = h("input", {
            style: false,
            data: { a: 111, b: 223, c: 333 },
            title: "test #2",
            label: "test",
            placeholder: "test",
            onkeydown: () => true,
            onkeypress: () => false,
            $onrender: () => true,
            onhover: () => true,
        });
        const container = document.createElement("div");
        const node = oldvnode.render();
        container.appendChild(node);
        oldvnode.redraw({ node: node, vnode: newvnode });
        expect(oldvnode).toEqual(newvnode);
        expect(node.style.cssText).toEqual("");
        expect(node.dataset["a"]).toEqual("111");
        expect(node.dataset["c"]).toEqual("333");
        expect(node.dataset["b"]).toEqual("223");
        expect(node.dataset["d"]).toEqual(undefined);
        expect(node.getAttribute("title")).toEqual("test #2");
        expect(node.getAttribute("placeholder")).toEqual("test");
        expect(node.value).toEqual("");
    });

    it("should provide a redraw method able to detect changes in child content", () => {
        const v1 = h("ul", [h("li", "a"), h("li", "b")]);
        const n1 = v1.render();
        const v2 = h("ul", {
            $html: "<li>a</li><li>b</li>",
            $onrender: (node) => node.classList.add("test"),
        });
        const v3 = h("ul", [h("li", "a")]);
        const v4 = h("ul", [h("li", "b")]);
        const n2 = v2.render();
        const n3 = v3.render();
        expect(n2.childNodes[0].childNodes[0].data).toEqual(
            n1.childNodes[0].childNodes[0].data
        );
        v1.redraw({ node: n1, vnode: v2 });
        expect(n1.classList[0]).toEqual("test");
        expect(v1).toEqual(v2);
        v3.redraw({ node: n3, vnode: v4 });
        expect(v3).toEqual(v4);
    });

    it("should execute $onrender callbacks whenever a child node is added to the DOM", async () => {
        let n;
        const $onrender = (node) => {
            n = node;
        };
        const vn1 = h("ul", [h("li")]);
        const vn2 = h("ul", [h("li"), h("li.vn2", { $onrender })]);
        const n1 = vn1.render();
        vn1.redraw({ node: n1, vnode: vn2 });
        expect(n.classList.value).toEqual("vn2");
        const vn3 = h("ul", [h("span.vn3", { $onrender })]);
        vn1.redraw({ node: n1, vnode: vn3 });
        expect(n.classList.value).toEqual("vn3");
        const rc = () => h("div.rc", { $onrender });
        await h3.init(rc);
        expect(n.classList.value).toEqual("rc");
        const rc2 = () => vn2;
        await h3.init(rc2);
        expect(n.classList.value).toEqual("vn2");
    });
});