import * as React from "react";

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

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

afterEach(cleanup);

const defaultProps = mock<IBreadcrumbProps>();

describe("Breadcrumb component rendering", () => {
	it("should render the component", () => {
		const breadcrumbItemMock = [
			{
				editorID: 1,
				component: "MenuItem",
				displayName: "Menu 1",
			},
			{
				editorID: 2,
				component: "MenuItem",
				displayName: "Menu 2",
			},
		];

		defaultProps.breadcrumb = breadcrumbItemMock;

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

		const breadcrumbWrapper = screen.getByTestId("breadcrumb-group-wrapper");
		expect(breadcrumbWrapper).toBeTruthy();
		const breadcrumbItems = screen.getAllByTestId("breadcrumb-item");
		expect(breadcrumbItems).toHaveLength(2);
	});

	it("should render only the menuItem", () => {
		const breadcrumbItemMock = [
			{
				editorID: 1,
				component: "MenuItem",
				displayName: "Menu 1",
			},
			{
				editorID: 2,
				component: "Section",
				displayName: "Menu 2",
			},
		];

		defaultProps.breadcrumb = breadcrumbItemMock;

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

		const breadcrumbItems = screen.getAllByTestId("breadcrumb-item");
		expect(breadcrumbItems).toHaveLength(1);
	});

	it("should handle the onclick", () => {
		const breadcrumbItemMock = [
			{
				editorID: 1,
				component: "MenuItem",
				displayName: "Menu 1",
			},
			{
				editorID: 2,
				component: "Section",
				displayName: "Menu 2",
			},
		];

		defaultProps.breadcrumb = breadcrumbItemMock;
		const setSelectedContentMock = jest.fn();
		defaultProps.setSelectedContent = setSelectedContentMock;

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

		const breadcrumbItems = screen.getAllByTestId("breadcrumb-item");
		expect(breadcrumbItems).toHaveLength(1);
		fireEvent.click(breadcrumbItems[0]);
		expect(setSelectedContentMock).toBeCalled();
	});
});
