import * as React from "react";
import ScrollableSelection, {
	IScrollableSelectionProps,
} from "@ax/components/Fields/VisualUniqueSelection/ScrollableSelection";
import { ThemeProvider } from "styled-components";
import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";
import "@testing-library/jest-dom";
import { render, screen, cleanup, fireEvent } from "@testing-library/react";
import { mock } from "jest-mock-extended";

afterEach(cleanup);

const defaultProps = mock<IScrollableSelectionProps>();
defaultProps.theme = "default-theme";
defaultProps.options = [
	{
		value: "primary",
		img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/primaryStyle",
	},
	{
		value: "secondary",
		img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/secondaryStyle",
	},
	{
		value: "link",
		img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/linkStyle",
	},
];
defaultProps.elementUniqueSelection = true;
defaultProps.columns = 2;
defaultProps.value = "value";
defaultProps.title = "title";
const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: string) => void>;
defaultProps.name = "name";
defaultProps.objKey = "element";
defaultProps.actions = {
	replaceElementsInCollectionAction: jest.fn(),
};
defaultProps.selectedContent = {
	component: "BasicContent",
	title: {
		content: "Title",
		tag: "h1",
	},
	anchorID: "basic",
	verticalSpacing: "medium",
	layout: "L001",
	theme: "default",
	moduleOrder: null,
	subtitle:
		"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu.",
	content:
		"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim ut nibh eget porttitor. Nunc eleifend mollis arcu.",
	primaryLink: {
		component: "Link",
		text: "Link 1",
		style: "primary",
		url: {
			href: null,
			linkTo: 3622,
			linkToURL: "//cx.dev.griddo.io/pre-griddo/fer-site/#papapapa",
			title: "New Page",
			anchor: "papapapa",
		},
		editorID: 5,
		parentEditorID: 4,
	},
	secondaryLink: {
		component: "Link",
		editorID: 6,
		parentEditorID: 4,
	},
	additionalContent: {
		image: {
			component: "LinkableImage",
			editorID: 7,
			parentEditorID: 4,
			title: "",
			alt: "",
			veil: 0,
			file: {
				id: 857,
				name: ".png",
				title: "",
				description: "",
				alt: "",
				tags: [],
				url: "https://images.dev.griddo.io/screenshot-2022-04-13-at-164915",
				thumb: "https://images.dev.griddo.io/w/215/h/161/screenshot-2022-04-13-at-164915",
				publicId: "thesaurus-dev/Screenshot_2022-04-13_at_16.49.15_927293bf-d163-402f-b216-4dc8656ea8c1",
				damId: "screenshot-2022-04-13-at-164915",
				published: "2022-04-18T08:52:48.334Z",
				size: 1123589,
				width: 1444,
				height: 640,
				orientation: "L",
				site: "global",
			},
		},
		video: {
			component: "Video",
			editorID: 8,
			parentEditorID: 4,
		},
	},
	editorID: 4,
	parentEditorID: 3,
};

describe("ScrollableSelection component rendering", () => {
	test("should render the component", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<ScrollableSelection {...defaultProps} />
			</ThemeProvider>,
		);

		expect(screen.getByTestId("scrollableSelectionComponent")).toBeTruthy();
	});
});

describe("ScrollableSelection component events", () => {
	test("should handle next and previous Page", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<ScrollableSelection {...defaultProps} />
			</ThemeProvider>,
		);

		const dots = screen.getAllByTestId("dotSelected");
		expect((dots[0] as HTMLOptionElement).selected).toBeTruthy();
		expect(screen.getByTestId("scrollableSelectionComponent")).toBeTruthy();
		const nextButton = screen.getAllByTestId("icon-action-component")[1];
		const prevButton = screen.getAllByTestId("icon-action-component")[0];
		fireEvent.click(nextButton);
		expect((dots[0] as HTMLOptionElement).selected).toBeFalsy();
		expect((dots[1] as HTMLOptionElement).selected).toBeTruthy();
		fireEvent.click(nextButton);
		expect((dots[0] as HTMLOptionElement).selected).toBeTruthy();
		expect((dots[1] as HTMLOptionElement).selected).toBeFalsy();
		fireEvent.click(nextButton);
		expect((dots[0] as HTMLOptionElement).selected).toBeFalsy();
		expect((dots[1] as HTMLOptionElement).selected).toBeTruthy();
		fireEvent.click(prevButton);
		fireEvent.click(prevButton);
		expect((dots[0] as HTMLOptionElement).selected).toBeTruthy();
		expect((dots[1] as HTMLOptionElement).selected).toBeFalsy();
	});

	test("should handle selection", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<ScrollableSelection {...defaultProps} />
			</ThemeProvider>,
		);

		const radioButtons = screen.getAllByTestId<HTMLInputElement>("radioButtons");
		fireEvent.click(radioButtons[0]);
		expect(onChangeMock).toHaveBeenCalled();
	});
});
