import * as React from "react";
import VisualUniqueSelection from "@ax/components/Fields/VisualUniqueSelection";
import { IImageSelectionProps } from "@ax/components/Fields/VisualUniqueSelection/ImageSelection";
import { 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 { render, screen, cleanup } from "@testing-library/react";
import { mock } from "jest-mock-extended";

afterEach(cleanup);

const defaultProps = mock<IImageSelectionProps & 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",
	},
];

describe("VisualUniqueSelection component rendering", () => {
	test("should render the component with ImageSelection", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<VisualUniqueSelection {...defaultProps} />
			</ThemeProvider>,
		);
		expect(screen.getByTestId("imageSelectionComponent")).toBeTruthy();
	});

	test("should render the component with ScrollableSelection", () => {
		defaultProps.elementUniqueSelection = true;
		defaultProps.columns = 2;

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

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