import React from "react";

import ProfileImage from "@ax/components/ProfileImage";
import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";

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

jest.mock(
	"@ax/components/ImageDragAndDrop",
	() => (props: any) =>
		React.createElement(
			"div",
			{
				"data-testid": "image-drag-and-drop-mock",
				onClick: () => props.handleUpload([{ id: 1, url: "http://example.com/image.jpg" }]),
			},
			React.createElement("button", { type: "button" }, "Upload Mock"),
		),
);

afterEach(cleanup);

const renderProfileImage = (props = {}) =>
	render(
		<ThemeProvider theme={parseTheme(globalTheme)}>
			<ProfileImage handleImage={jest.fn()} size={96} {...props} />
		</ThemeProvider>,
	);

describe("ProfileImage rendering", () => {
	it("should render profile-image-wrapper testid", () => {
		renderProfileImage();
		expect(screen.getByTestId("profile-image-wrapper")).toBeTruthy();
	});

	it("should render placeholder icon when no imageUrl is provided", () => {
		renderProfileImage({ imageUrl: undefined });
		const wrapper = screen.getByTestId("profile-image-wrapper");
		expect(wrapper.querySelector("svg")).toBeTruthy();
	});

	it("should render image when imageUrl is provided", () => {
		renderProfileImage({ imageUrl: "http://example.com/profile.jpg" });
		const wrapper = screen.getByTestId("profile-image-wrapper");
		const img = wrapper.querySelector("img");
		expect(img).toBeTruthy();
		expect(img?.getAttribute("src")).toContain("profile.jpg");
	});

	it("should render Edit Avatar text in overlay", () => {
		renderProfileImage();
		expect(screen.getByText("Edit Avatar")).toBeTruthy();
	});
});

describe("ProfileImage modal", () => {
	it("should open modal when profile-image-wrapper is clicked", () => {
		renderProfileImage();
		const wrapper = screen.getByTestId("profile-image-wrapper");
		fireEvent.click(wrapper);
		expect(screen.getByText("Upload Media")).toBeTruthy();
	});

	it("should close modal when profile-image-wrapper is clicked again", () => {
		renderProfileImage();
		const wrapper = screen.getByTestId("profile-image-wrapper");

		fireEvent.click(wrapper);
		expect(screen.getByText("Upload Media")).toBeTruthy();

		fireEvent.click(wrapper);
		expect(screen.queryByText("Upload Media")).toBeFalsy();
	});

	it("should render ImageDragAndDrop inside modal when open", () => {
		renderProfileImage();
		const wrapper = screen.getByTestId("profile-image-wrapper");
		fireEvent.click(wrapper);

		expect(screen.getByText("Upload Media")).toBeTruthy();
		expect(screen.getByTestId("image-drag-and-drop-mock")).toBeTruthy();
	});

	it("should not render ImageDragAndDrop when modal is closed", () => {
		renderProfileImage();
		expect(screen.queryByTestId("image-drag-and-drop-mock")).toBeFalsy();
	});
});

describe("ProfileImage upload", () => {
	it("should call handleImage when image is uploaded", () => {
		const handleImage = jest.fn();
		renderProfileImage({ handleImage });

		const wrapper = screen.getByTestId("profile-image-wrapper");
		fireEvent.click(wrapper);

		const uploadButton = screen.getByText("Upload Mock");
		fireEvent.click(uploadButton);

		expect(handleImage).toHaveBeenCalledWith({ id: 1, url: "http://example.com/image.jpg" });
	});

	it("should close modal after successful upload", () => {
		const handleImage = jest.fn();
		renderProfileImage({ handleImage });

		const wrapper = screen.getByTestId("profile-image-wrapper");
		fireEvent.click(wrapper);

		expect(screen.getByText("Upload Media")).toBeTruthy();

		const uploadButton = screen.getByText("Upload Mock");
		fireEvent.click(uploadButton);

		expect(screen.queryByText("Upload Media")).toBeFalsy();
	});
});
