import { parseTheme } from "@ax/helpers";
import CropView from "@ax/modules/Sites/SitesList/WelcomeModal/ImageStep/CropView";
import globalTheme from "@ax/themes/theme.json";

import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { ThemeProvider } from "styled-components";

afterEach(cleanup);

const renderCropView = (props = {}) =>
	render(
		<ThemeProvider theme={parseTheme(globalTheme)}>
			<CropView imageSrc="data:image/jpeg;base64,abc" onConfirm={jest.fn()} onUploadNew={jest.fn()} {...props} />
		</ThemeProvider>,
	);

describe("CropView rendering", () => {
	it("should render the cropper", () => {
		renderCropView();
		expect(screen.getByTestId("cropper-mock")).toBeTruthy();
	});

	it("should render zoom controls", () => {
		renderCropView();
		expect(screen.getByLabelText("Zoom in")).toBeTruthy();
		expect(screen.getByLabelText("Zoom out")).toBeTruthy();
		expect(screen.getByLabelText("Zoom")).toBeTruthy();
	});

	it("should render Next step and Upload new image buttons", () => {
		renderCropView();
		expect(screen.getByText("Next step")).toBeTruthy();
		expect(screen.getByText("Upload new image")).toBeTruthy();
	});
});

describe("CropView events", () => {
	it("should call onConfirm with cropped area when Next step is clicked", () => {
		const onConfirm = jest.fn();
		renderCropView({ onConfirm });
		fireEvent.click(screen.getByText("Next step"));
		expect(onConfirm).toHaveBeenCalledWith({ x: 0, y: 0, width: 100, height: 100 });
	});

	it("should call onUploadNew when Upload new image is clicked", () => {
		const onUploadNew = jest.fn();
		renderCropView({ onUploadNew });
		fireEvent.click(screen.getByText("Upload new image"));
		expect(onUploadNew).toHaveBeenCalledTimes(1);
	});
});
