import * as React from "react";
import ImageSelection, { IImageSelectionProps } from "@ax/components/Fields/VisualUniqueSelection/ImageSelection";
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<IImageSelectionProps>();
defaultProps.theme = "default-theme";
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";

describe("VisualUniqueSelection component rendering", () => {
	test("should render the component", () => {
		defaultProps.options = [
			{
				theme: "default-theme",
				options: [
					{
						value: "default",
						img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/primaryStyle",
					},
					{
						value: "defaultAlt",
						img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/secondaryStyle",
					},
				],
			},
			{
				theme: "griddo-alt-theme",
				options: [
					{
						value: "default",
						img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/primaryStyle",
					},
					{
						value: "defaultAlt",
						img: "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/themes/secondaryStyle",
					},
				],
			},
		];
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<ImageSelection {...defaultProps} />
			</ThemeProvider>,
		);

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

describe("VisualUniqueSelection component events", () => {
	test("should handle change", () => {
		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",
			},
		];
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<ImageSelection {...defaultProps} />
			</ThemeProvider>,
		);

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