import { Provider } from "react-redux";

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

import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
import configureStore from "redux-mock-store";
import thunk from "redux-thunk";
import { ThemeProvider } from "styled-components";

import { sitesDataMock, userDataMock } from "../../../../../__mocks__/store/SitesList";

afterEach(cleanup);

const mockStore = configureStore([thunk]);

const initialStore = {
	users: userDataMock,
	sites: { allSites: sitesDataMock.sites },
};

const renderWelcomeModal = (props = {}, storeData = initialStore) => {
	const store = mockStore(storeData);
	return render(
		<Provider store={store}>
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<WelcomeModal isOpen={true} toggleModal={jest.fn()} {...props} />
			</ThemeProvider>
		</Provider>,
	);
};

describe("WelcomeModal rendering", () => {
	it("should render the modal when open", () => {
		renderWelcomeModal({ isOpen: true });
		expect(screen.getByTestId("modal-wrapper")).toBeTruthy();
	});

	it("should not render the modal when closed", () => {
		renderWelcomeModal({ isOpen: false });
		expect(screen.queryByTestId("modal-wrapper")).toBeFalsy();
	});

	it("should display WelcomeStep with correct title and buttons on initial load", () => {
		renderWelcomeModal();
		expect(screen.getByText("Welcome")).toBeTruthy();
		expect(screen.getByText("Complete profile")).toBeTruthy();
		expect(screen.getByText("Skip, I\u2019ll do it later")).toBeTruthy();
	});
});

describe("WelcomeModal step navigation", () => {
	it("should navigate through all steps from welcome to timezone", async () => {
		renderWelcomeModal();

		// Step 1: Welcome
		expect(screen.getByText("Welcome")).toBeTruthy();

		// Step 2: Image
		await act(async () => {
			fireEvent.click(screen.getByText("Complete profile"));
		});
		expect(screen.getByText("Step 1 of 3: Profile Picture")).toBeTruthy();

		// Step 3: Data
		await act(async () => {
			fireEvent.click(screen.getByText("Skip profile picture"));
		});
		expect(screen.getByText("Step 2 of 3: Profile data")).toBeTruthy();

		// Step 4: Timezone
		await act(async () => {
			fireEvent.click(screen.getByText("Next step"));
		});
		expect(screen.getByText("Step 3 of 3: Define timezone")).toBeTruthy();
	});
});
