import * as React from "react";
import { ThemeProvider } from "styled-components";
import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";
import { render, cleanup, screen } from "../../../../../config/jest/test-utils";
import { mock } from "jest-mock-extended";
import configureStore from "redux-mock-store";
import thunk from "redux-thunk";
import TranslateButton, { ITranslateButtonProps } from "@ax/components/Fields/TranslateButton";

afterEach(cleanup);

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

const defaultProps = mock<ITranslateButtonProps>();

describe("Translate Button component rendering", () => {
	it("should render the component in page editor", () => {
		const initialStore = {
			app: { globalSettings: { autoTranslation: true } },
			pageEditor: { editorContent: { canBeTranslated: true }, isIATranslated: false },
			structuredData: { form: null, isIATranslated: false },
			forms: { formContent: null },
		};
		const store = mockStore(initialStore);

		defaultProps.contentType = "page";

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

		const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
		expect(translateButtonWrapper).toBeTruthy();
		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
		expect(translatedNotificationWrapper).toBeFalsy();
	});

	it("should render the component in structured data editor", () => {
		const initialStore = {
			app: { globalSettings: { autoTranslation: true } },
			pageEditor: { editorContent: null, isIATranslated: false },
			structuredData: { form: { canBeTranslated: true }, isIATranslated: false },
			forms: { formContent: null },
		};
		const store = mockStore(initialStore);

		defaultProps.contentType = "data";

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

		const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
		expect(translateButtonWrapper).toBeTruthy();
		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
		expect(translatedNotificationWrapper).toBeFalsy();
	});

	it("should not render the component if setting is off", () => {
		const initialStore = {
			app: { globalSettings: { autoTranslation: false } },
			pageEditor: { editorContent: { canBeTranslated: true }, isIATranslated: false },
			structuredData: { form: null, isIATranslated: false },
			forms: { formContent: null },
		};
		const store = mockStore(initialStore);

		defaultProps.contentType = "page";

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

		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
		expect(translatedNotificationWrapper).toBeFalsy();
		expect(translateButtonWrapper).toBeFalsy();
	});

	it("should not render the component if page can't be translated", () => {
		const initialStore = {
			app: { globalSettings: { autoTranslation: true } },
			pageEditor: { editorContent: { canBeTranslated: false }, isIATranslated: false },
			structuredData: { form: null, isIATranslated: false },
			forms: { formContent: null },
		};
		const store = mockStore(initialStore);

		defaultProps.contentType = "page";

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

		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
		expect(translatedNotificationWrapper).toBeFalsy();
		expect(translateButtonWrapper).toBeFalsy();
	});

	it("should not render the component if structured data can't be translated", () => {
		const initialStore = {
			app: { globalSettings: { autoTranslation: true } },
			pageEditor: { editorContent: null, isIATranslated: false },
			structuredData: { form: { canBeTranslated: false }, isIATranslated: false },
			forms: { formContent: null },
		};
		const store = mockStore(initialStore);

		defaultProps.contentType = "data";

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

		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
		expect(translatedNotificationWrapper).toBeFalsy();
		expect(translateButtonWrapper).toBeFalsy();
	});

	it("should render the notification if page is already translated", () => {
		const initialStore = {
			app: { globalSettings: { autoTranslation: true } },
			pageEditor: { editorContent: { canBeTranslated: false }, isIATranslated: true },
			structuredData: { form: null, isIATranslated: false },
			forms: { formContent: null },
		};
		const store = mockStore(initialStore);

		defaultProps.contentType = "page";

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

		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
		expect(translatedNotificationWrapper).toBeTruthy();
		expect(translateButtonWrapper).toBeFalsy();
	});

	it("should render the notification if structured data is already translated", () => {
		const initialStore = {
			app: { globalSettings: { autoTranslation: true } },
			pageEditor: { editorContent: null, isIATranslated: false },
			structuredData: { form: { canBeTranslated: false }, isIATranslated: true },
			forms: { formContent: null },
		};
		const store = mockStore(initialStore);

		defaultProps.contentType = "data";

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

		const translateButtonWrapper = screen.queryByTestId("translate-button-wrapper");
		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
		expect(translatedNotificationWrapper).toBeTruthy();
		expect(translateButtonWrapper).toBeFalsy();
	});

	it("should render the component if page is already translated but can be translated", () => {
		const initialStore = {
			app: { globalSettings: { autoTranslation: true } },
			pageEditor: { editorContent: { canBeTranslated: true }, isIATranslated: true },
			structuredData: { form: null, isIATranslated: false },
			forms: { formContent: null },
		};
		const store = mockStore(initialStore);

		defaultProps.contentType = "page";

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

		const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
		expect(translateButtonWrapper).toBeTruthy();
		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
		expect(translatedNotificationWrapper).toBeFalsy();
	});

	it("should render the component if structured data is already translated but can be translated", () => {
		const initialStore = {
			app: { globalSettings: { autoTranslation: true } },
			pageEditor: { editorContent: null, isIATranslated: false },
			structuredData: { form: { canBeTranslated: true }, isIATranslated: true },
			forms: { formContent: null },
		};
		const store = mockStore(initialStore);

		defaultProps.contentType = "data";

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

		const translateButtonWrapper = screen.getByTestId("translate-button-wrapper");
		expect(translateButtonWrapper).toBeTruthy();
		const translatedNotificationWrapper = screen.queryByTestId("translated-notification-wrapper");
		expect(translatedNotificationWrapper).toBeFalsy();
	});
});
