import * as React from "react";

import { ThemeProvider } from "styled-components";
import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
import { mock } from "jest-mock-extended";
import configureStore from "redux-mock-store";
import "@testing-library/jest-dom";
import thunk from "redux-thunk";

import { parseTheme } from "@ax/helpers";
import PreviewForm, { IPreviewFormProps } from "@ax/components/ConfigPanel/PreviewForm";
import globalTheme from "@ax/themes/theme.json";

beforeEach(() => {
	cleanup();
});

const middlewares: any = [thunk];
const mockStore = configureStore(middlewares);

const initialStore = {
	pageEditor: {
		selectedContent: {
			editorID: 0,
			title: "selected content field",
			id: 1,
			component: "module",
		},
		editorContent: {
			module: 0,
			editorID: 0,
			parentEditorID: null,
			isHome: false,
			headerConfig: "{}",
			footerConfig: "{}",
		},
	},
	navigation: {
		currentDefaultsContent: [
			{
				type: "module",
				id: 2,
			},
		],
	},
};

const store = mockStore(initialStore);

const defaultProps = mock<IPreviewFormProps>();

defaultProps.selectedTab = "content";
const setSelectedTabMock = defaultProps.setSelectedTab as jest.MockedFunction<(tab: string) => void>;

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

		const previewFormWrapper = screen.getByTestId("preview-form-wrapper");
		expect(previewFormWrapper).toBeTruthy();

		const noteFieldTitle = screen.getByText("This page is currently being edited");
		expect(noteFieldTitle).toBeTruthy();
	});

	it("should render component with user name", () => {
		defaultProps.userEditing = {
			id: 0,
			name: "User 1",
			username: "user1",
		};

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

		const previewFormWrapper = screen.getByTestId("preview-form-wrapper");
		expect(previewFormWrapper).toBeTruthy();

		const noteFieldTitle = screen.getByText(/User 1/i);
		expect(noteFieldTitle).toBeTruthy();

		expect(setSelectedTabMock).toBeCalled();
	});
});
