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


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

		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-secondary", "group-data-checked:stroke-white");
	});
	it("Renders disabled", () => {
		render(<SecondaryCheckbox 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-secondary", "group-data-checked:stroke-white");
	});
	it("Renders with custom classes", () => {
		const className = "custom-class";

		render(<SecondaryCheckbox 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(<SecondaryCheckbox>{label}</SecondaryCheckbox>);

		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(<SecondaryCheckbox showBox={true}/>);

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

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