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

import { parseTheme } from "@ax/helpers";
import { ListItem, ListItemProps } from "@ax/components/Lists";
import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

const onClickMock = jest.fn();

const defaultProps: ListItemProps = {
	children: false,
	onClick: onClickMock,
};

describe("List component rendering", () => {
	it("should render the component with icon", () => {
		defaultProps.isSelected = true;

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

		const wrapperList = screen.getByTestId("list-item");
		expect(wrapperList).toBeTruthy();

		const icon = screen.getByTestId("icon-component-done");
		expect(icon).toBeTruthy();
	});

	it("should render the component with no icon", () => {
		defaultProps.isSelected = false;

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

		const wrapperList = screen.getByTestId("list-item");
		expect(wrapperList).toBeTruthy();

		const icon = screen.queryByTestId("icon-component-done");
		expect(icon).not.toBeTruthy();
	});

	it("should call the onclick", () => {
		defaultProps.isSelected = false;

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

		const wrapperList = screen.getByTestId("list-item");
		expect(wrapperList).toBeTruthy();

		const icon = screen.queryByTestId("icon-component-done");
		expect(icon).not.toBeTruthy();

		fireEvent.click(wrapperList);
		expect(onClickMock).toBeCalled();
	});
});
