import * as React from "react";
import ComponentArraySelector from "@ax/components/Fields/ComponentArray";
import { ThemeProvider } from "styled-components";
import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";
import { IModule } from "@ax/types";
import { ISameComponentArrayProps } from "@ax/components/Fields/ComponentArray/SameComponentArray";
import { IMixableComponentArrayProps } from "@ax/components/Fields/ComponentArray/MixableComponentArray";
import { render, screen, cleanup } from "@testing-library/react";
import { mock } from "jest-mock-extended";

afterEach(cleanup);

const mixableProps = mock<ISameComponentArrayProps & IMixableComponentArrayProps>();
const mixableModule = mock<IModule>();
const otherMixableModule = mock<IModule>();
// default values for MixableComponentArray
mixableModule.editorID = 1;
mixableModule.component = "HeroCard";
mixableModule.title = "Cards";
mixableModule.modules = [];
otherMixableModule.editorID = 2;
otherMixableModule.component = "HeroCard";
otherMixableModule.title = "Hero Section";
otherMixableModule.modules = [];
mixableProps.field = { type: "components" };
mixableProps.value = [mixableModule];
mixableProps.activatedModules = ["HeroSection"];
mixableProps.whiteList = [];
mixableProps.moduleCopy = null;

const sameProps = mock<ISameComponentArrayProps & IMixableComponentArrayProps>();
const sameModule = mock<IModule>();
// default values for SameComponentArray
sameModule.editorID = 4;
sameModule.component = "HeroCard";
sameModule.title = "Hero Section";
sameModule.modules = [
	{
		id: "ArticlesDistributor",
		title: "Articles Distributor",
		category: "articlesAndEvents",
		thumbnails: {
			"1x": "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/thumbnails/ArticlesDistributor",
			"2x": "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/thumbnails/ArticlesDistributor@2x",
		},
		dataPacks: ["ARTICLES"],
		type: {},
		sectionList: {
			BasicTemplate: ["mainContent"],
			NewsDetail: ["closureContent"],
			NewsList: ["relatedContent"],
			SitemapTemplate: ["relatedContent", "closureContent"],
			StoryDetail: ["mainContent", "relatedContent"],
		},
	},
];
sameProps.value = [sameModule];
sameProps.activatedModules = ["HeroSection"];
sameProps.whiteList = [];
sameProps.selectedContent = {
	anchorID: null,
	verticalSpacing: "medium",
	component: "CardCollection",
	kind: "BasicCard",
	title: {
		content: "Title",
		tag: "h2",
	},
	subtitle: "Subtitle",
	detail: "Detail",
	elements: [
		{
			component: "BasicCard",
			title: {
				content: "Title",
				tag: "h4",
			},
			subtitle: "Lorem Ipsum",
			description:
				"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu. ",
			auxInfo: "Auxiliar Information",
			link: {
				component: "Link",
				text: "Link",
				url: {
					url: "",
					linkTo: null,
					newTab: false,
					noFollow: false,
					size: null,
					icon: null,
					linkContainer: null,
				},
				style: "link",
				editorID: 6,
				parentEditorID: 5,
			},
			link2: {
				component: "Link",
				editorID: 7,
				parentEditorID: 5,
			},
			media: {
				image: {
					component: "LinkableImage",
					editorID: 8,
					parentEditorID: 5,
				},
				video: {
					component: "Video",
					editorID: 9,
					parentEditorID: 5,
				},
			},
			editorID: 5,
			parentEditorID: 4,
		},
	],
	groupingLink: {
		component: "Link",
		editorID: 20,
		parentEditorID: 4,
	},
	layout: "L002",
	theme: "default",
	editorID: 4,
	parentEditorID: 3,
};
sameProps.elementUniqueSelection = true;

describe("ComponentArraySelector component rendering", () => {
	test("should render the component with MixableComponentArray", () => {
		mixableProps.disabled = true;
		mixableProps.editorID = 1;
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<ComponentArraySelector {...mixableProps} />
			</ThemeProvider>,
		);

		expect(screen.getAllByTestId("mixableComponentWrapper")).toBeTruthy();
	});

	test("should render the component with SameComponentArray", () => {
		sameProps.field = { type: "components" };
		sameProps.objKey = "elements";
		sameProps.disabled = false;
		sameProps.maxItems = 10;
		sameProps.actions = {
			addModuleAction: jest.fn(),
			addComponentAction: jest.fn(),
		};

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

		expect(screen.getAllByTestId("sameComponentWrapper")).toBeTruthy();
	});
});
