import * as React from "react";

import { ThemeProvider } from "styled-components";
import { mock } from "jest-mock-extended";
import { render, screen, cleanup, fireEvent } from "@testing-library/react";
import { parseTheme } from "@ax/helpers";
import "@testing-library/jest-dom";

import EmptyState from "@ax/components/EmptyState";
import { IEmptyStateProps } from "@ax/types";
import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

const defaultProps = mock<IEmptyStateProps>();

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

		const emptyStateWrapper = screen.getByTestId("wrapper");
		expect(emptyStateWrapper).toBeTruthy();
		expect(emptyStateWrapper).toHaveTextContent("Oh! This Looks so empty");
	});

	it("should render the component with title", () => {
		defaultProps.title = "The title";
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<EmptyState {...defaultProps} />
			</ThemeProvider>,
		);

		const emptyStateWrapper = screen.getByTestId("wrapper");
		expect(emptyStateWrapper).toBeTruthy();
		expect(emptyStateWrapper).toHaveTextContent("The title");
	});

	it("should render the component with message", () => {
		defaultProps.message = "A message";
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<EmptyState {...defaultProps} />
			</ThemeProvider>,
		);

		const emptyStateWrapper = screen.getByTestId("wrapper");
		expect(emptyStateWrapper).toBeTruthy();
		expect(emptyStateWrapper).toHaveTextContent("A message");
	});
});

describe("EmptyState component events", () => {
	it("should trigger the onClick", () => {
		const actionFunc = jest.fn();
		defaultProps.button = "A button";
		defaultProps.action = actionFunc;

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

		const emptyStateWrapper = screen.getByTestId("wrapper");
		const buttonComponent = screen.getByTestId("button-line-inverse");

		expect(emptyStateWrapper).toBeTruthy();
		expect(buttonComponent).toBeTruthy();
		expect(emptyStateWrapper).toHaveTextContent("A button");
		fireEvent.click(buttonComponent);
		expect(actionFunc).toBeCalled();
	});
});
