import React from "react";
import "@testing-library/jest-dom";
import { ThemeProvider } from "styled-components";
import { render, screen, cleanup, fireEvent } from "@testing-library/react";

import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";

import FieldGroup from "@ax/components/Fields/FieldGroup";

afterEach(cleanup);

const defaultProps = {
	title: "title",
	children: "",
	collapsed: true,
};

describe("FieldGroup component rendering", () => {
	it("should render the component", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FieldGroup {...defaultProps} />
			</ThemeProvider>,
		);

		const fieldGroupWrapper = screen.getByTestId("field-group-wrapper");
		const fieldGroupLabel = screen.getByTestId("field-group-label");
		const fieldGroupContent = screen.getByTestId("field-group-content");

		expect(fieldGroupWrapper).toBeTruthy();
		expect(fieldGroupLabel).toBeTruthy();
		expect(fieldGroupLabel).toHaveTextContent("title");
		expect(fieldGroupContent).toBeTruthy();
		expect(fieldGroupContent).toHaveTextContent("");
	});

	it("should trigger the onClick", () => {
		const props = {
			title: "title",
			children: "blablabla",
			collapsed: false,
		};

		const setStateMock = jest.fn();
		const useStateMock: any = (useState: string) => [useState, setStateMock];
		jest.spyOn(React, "useState").mockImplementation(useStateMock);

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<FieldGroup {...props} />
			</ThemeProvider>,
		);

		const fieldGroupLabel = screen.getByTestId("field-group-label");
		const fieldGroupContent = screen.getByTestId("field-group-content");
		expect(fieldGroupLabel).toBeTruthy();
		expect(fieldGroupContent).toBeTruthy();
		expect(fieldGroupContent).toHaveTextContent("blablabla");
		fireEvent.click(fieldGroupLabel);
		expect(setStateMock).toHaveBeenCalled();
	});
});
