import * as React from "react";
import { ThemeProvider } from "styled-components";
import { parseTheme } from "@ax/helpers";
import { mock } from "jest-mock-extended";
import configureStore from "redux-mock-store";

import globalTheme from "@ax/themes/theme.json";
import Wysiwyg, { IWysiwygProps } from "@ax/components/Fields/Wysiwyg";
import { render, cleanup, screen } from "../../../../../config/jest/test-utils";

afterEach(() => {
	cleanup();
	jest.resetAllMocks();
});

const initialStore = {
	app: {
		token:
			"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MiwidXNlcm5hbWUiOiJhZG1pbiIsImVtYWlsIjoiYWRtaW5Ac2VjdW95YXMuY29tIiwiY2hlY2siOnRydWUsImlhdCI6MTY1NzExMjAxM30.1SDgrPDXU6ToFT8dtzEIxzaBevhmdBI4idKtSrd7vxQ",
	},
};

const mockStore = configureStore();

const store = mockStore(initialStore);

const defaultProps = mock<IWysiwygProps>();

describe("Wysiwyg component rendering", () => {
	it("should render the component in global", async () => {
		defaultProps.value = "This is the text";

		const initialState = { ...initialStore, ...defaultProps };

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

		const wysiwygWrapper = screen.getByTestId("wysiwyg-wrapper");

		expect(wysiwygWrapper).toBeTruthy();
		expect(await screen.findByText("This is the text")).toBeTruthy();
	});

	it("should render the component in site", async () => {
		defaultProps.value = "This is the text";
		defaultProps.full = false;
		defaultProps.site = {
			id: 85,
			name: "The Best Site",
			theme: "default-theme",
			author: "2",
			pages: [],
			published: "2021-11-03T16:54:14.000Z",
			thumbnail: "http://images.dev.griddo.io/lil-bub-gato-11dd1482-476a-416d-88cf-3b9fb38d6f4d",
			timezone: "Europe/Madrid",
			favicon: "",
			bigAvatar: "",
			smallAvatar: "",
			isPublished: true,
			updated: true,
			defaultLanguage: 4,
			path: "",
			domain: 1,
			navigationModules: [],
		};

		const initialState = { ...initialStore, ...defaultProps };

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

		const wysiwygWrapper = screen.getByTestId("wysiwyg-wrapper");

		expect(wysiwygWrapper).toBeTruthy();
		expect(await screen.findByText("This is the text")).toBeTruthy();
	});

	it("should render when disabled", async () => {
		defaultProps.value = "This is the text";
		defaultProps.disabled = true;
		defaultProps.placeholder = "The placeholder";

		const initialState = { ...initialStore, ...defaultProps };

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

		const wysiwygWrapper = screen.getByTestId("wysiwyg-wrapper");

		expect(wysiwygWrapper).toBeTruthy();
		expect(await screen.findByText("This is the text")).toBeTruthy();
	});

	it("should render when empty string", async () => {
		defaultProps.value = "";
		defaultProps.error = true;

		const initialState = { ...initialStore, ...defaultProps };

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

		const textarea = screen.getByRole("textbox", { hidden: true });
		expect(textarea).toBeTruthy();
	});
});
