import LightCheckbox from "$/component/input/checkbox/LightCheckbox";
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";


describe("Renders", () => {
	it("Renders with defaults", () => {
		render(<LightCheckbox/>);

		const checkbox = screen.getByTestId("mattrixwv-checkbox");
		expect(checkbox).toBeInTheDocument();
		expect(checkbox).toHaveClass("cursor-pointer");
		expect(checkbox).not.toHaveAttribute("data-disabled");

		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
		expect(checkboxGraphic).toBeInTheDocument();
		expect(checkboxGraphic).toHaveClass("border", "rounded");
		expect(checkboxGraphic).toHaveClass("size-4");
		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark");
	});
	it("Renders disabled", () => {
		render(<LightCheckbox disabled/>);

		const checkbox = screen.getByTestId("mattrixwv-checkbox");
		expect(checkbox).toBeInTheDocument();
		expect(checkbox).toHaveClass("cursor-not-allowed");
		expect(checkbox).toHaveAttribute("data-disabled");

		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
		expect(checkboxGraphic).toBeInTheDocument();
		expect(checkboxGraphic).toHaveClass("border", "rounded");
		expect(checkboxGraphic).toHaveClass("size-4");
		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark");
	});
	it("Renders with custom classes", () => {
		const className = "custom-class";

		render(<LightCheckbox className={className}/>);

		const checkbox = screen.getByTestId("mattrixwv-checkbox");
		expect(checkbox).toBeInTheDocument();

		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
		expect(checkboxGraphic).toBeInTheDocument();
		expect(checkboxGraphic).toHaveClass(className);
	});
	it("Renders with label", () => {
		const label = "Some Label";

		render(<LightCheckbox>{label}</LightCheckbox>);

		const checkbox = screen.getByTestId("mattrixwv-checkbox");
		expect(checkbox).toBeInTheDocument();

		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
		expect(checkboxGraphic).toBeInTheDocument();

		const checkboxLabel = screen.getByTestId("mattrixwv-checkbox-label");
		expect(checkboxLabel).toBeInTheDocument();
		expect(checkboxLabel).toHaveTextContent(label);
	});
});

describe("Box variants", () => {
	it("Renders with box", () => {
		render(<LightCheckbox showBox={true}/>);

		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
		expect(checkboxGraphic).toBeInTheDocument();
		expect(checkboxGraphic).toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark");
		expect(checkboxGraphic).not.toHaveClass("group-data-checked:stroke-light");
	});
	it("Renders without box", () => {
		render(<LightCheckbox showBox={false}/>);

		const checkboxGraphic = screen.getByTestId("mattrixwv-checkbox-graphic");
		expect(checkboxGraphic).toBeInTheDocument();
		expect(checkboxGraphic).not.toHaveClass("group-data-checked:bg-light", "group-data-checked:stroke-dark");
		expect(checkboxGraphic).toHaveClass("group-data-checked:stroke-light");
	});
});
