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

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

afterEach(cleanup);

const renderUploadView = (props = {}) =>
	render(
		<ThemeProvider theme={parseTheme(globalTheme)}>
			<UploadView onImageLoaded={jest.fn()} onSkip={jest.fn()} {...props} />
		</ThemeProvider>,
	);

describe("UploadView rendering", () => {
	it("should render the skip button", () => {
		renderUploadView();
		expect(screen.getByText("Skip profile picture")).toBeTruthy();
	});

	it("should render the select image button", () => {
		renderUploadView();
		expect(screen.getByText("Select image")).toBeTruthy();
	});

	it("should render the file input", () => {
		renderUploadView();
		const fileInput = document.querySelector('input[type="file"]');
		expect(fileInput).toBeTruthy();
	});

	it("should not render error message initially", () => {
		renderUploadView();
		expect(screen.queryByTestId("upload-view-error")).toBeFalsy();
	});

	it("should show error for invalid file format", () => {
		renderUploadView();
		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
		const invalidFile = new File(["content"], "document.pdf", { type: "application/pdf" });
		fireEvent.change(fileInput, { target: { files: [invalidFile] } });
		expect(screen.getByTestId("upload-view-error")).toBeTruthy();
	});
});

describe("UploadView events", () => {
	it("should call onSkip when skip button is clicked", () => {
		const onSkip = jest.fn();
		renderUploadView({ onSkip });
		fireEvent.click(screen.getByText("Skip profile picture"));
		expect(onSkip).toHaveBeenCalledTimes(1);
	});

	it("should call onImageLoaded with data URL for valid file", () => {
		const onImageLoaded = jest.fn();
		const mockResult = "data:image/jpeg;base64,abc123";

		const mockFileReader = {
			onload: null as any,
			readAsDataURL: jest.fn(function (this: any) {
				this.onload({ target: { result: mockResult } });
			}),
		};
		jest.spyOn(global, "FileReader" as any).mockImplementation(() => mockFileReader);

		renderUploadView({ onImageLoaded });
		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
		const validFile = new File(["content"], "photo.jpg", { type: "image/jpeg" });
		fireEvent.change(fileInput, { target: { files: [validFile] } });

		expect(onImageLoaded).toHaveBeenCalledWith(mockResult);
	});

	it("should not call onImageLoaded for invalid file format", () => {
		const onImageLoaded = jest.fn();
		renderUploadView({ onImageLoaded });
		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
		const invalidFile = new File(["content"], "document.pdf", { type: "application/pdf" });
		fireEvent.change(fileInput, { target: { files: [invalidFile] } });
		expect(onImageLoaded).not.toHaveBeenCalled();
	});

	it("should show drop title when dragging over", () => {
		renderUploadView();
		const dragWrapper = screen.getByTestId("drag-drop-wrapper");
		fireEvent.dragEnter(dragWrapper);
		fireEvent.dragOver(dragWrapper);
		expect(screen.getByText("Drop your image")).toBeTruthy();
	});
});
