import React from "react";

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

import { AddKeywordsModal, DeleteKeywordsModal } from "@ax/components/KeywordsPreviewModal/atoms";
import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

const renderWithTheme = (ui: React.ReactElement) =>
	render(<ThemeProvider theme={parseTheme(globalTheme)}>{ui}</ThemeProvider>);

describe("AddKeywordsModal component rendering", () => {
	it("should render the modal when isOpen is true", () => {
		renderWithTheme(<AddKeywordsModal isOpen={true} toggleModal={jest.fn()} addNewKeyword={jest.fn()} />);

		expect(screen.getByTestId("modal-wrapper")).toBeTruthy();
	});

	it("should not render the modal when isOpen is false", () => {
		renderWithTheme(<AddKeywordsModal isOpen={false} toggleModal={jest.fn()} addNewKeyword={jest.fn()} />);

		expect(screen.queryByTestId("modal-wrapper")).toBeNull();
	});

	it("should render the New keyword title", () => {
		renderWithTheme(<AddKeywordsModal isOpen={true} toggleModal={jest.fn()} addNewKeyword={jest.fn()} />);

		expect(screen.getByText("New keyword")).toBeTruthy();
	});

	it("should render the Create keyword button disabled when no keywords are entered", () => {
		renderWithTheme(<AddKeywordsModal isOpen={true} toggleModal={jest.fn()} addNewKeyword={jest.fn()} />);

		const createButton = screen.getByText("Create keyword").closest("button");
		expect(createButton).toBeDisabled();
	});
});

describe("AddKeywordsModal component events", () => {
	it("should call toggleModal when Cancel button is clicked", () => {
		const toggleModalMock = jest.fn();

		renderWithTheme(<AddKeywordsModal isOpen={true} toggleModal={toggleModalMock} addNewKeyword={jest.fn()} />);

		const cancelButton = screen.getByText("Cancel").closest("button");
		expect(cancelButton).toBeTruthy();
		cancelButton && fireEvent.click(cancelButton);
		expect(toggleModalMock).toBeCalled();
	});
});

describe("DeleteKeywordsModal component rendering", () => {
	it("should render the modal when isOpen is true", () => {
		renderWithTheme(<DeleteKeywordsModal isOpen={true} toggleModal={jest.fn()} deleteKeyword={jest.fn()} />);

		expect(screen.getByTestId("modal-wrapper")).toBeTruthy();
	});

	it("should not render the modal when isOpen is false", () => {
		renderWithTheme(<DeleteKeywordsModal isOpen={false} toggleModal={jest.fn()} deleteKeyword={jest.fn()} />);

		expect(screen.queryByTestId("modal-wrapper")).toBeNull();
	});

	it("should render the Delete keyword title", () => {
		renderWithTheme(<DeleteKeywordsModal isOpen={true} toggleModal={jest.fn()} deleteKeyword={jest.fn()} />);

		expect(screen.getAllByText("Delete keyword").length).toBeGreaterThan(0);
	});
});

describe("DeleteKeywordsModal component events", () => {
	it("should call deleteKeyword when Delete keyword button is clicked", () => {
		const deleteKeywordMock = jest.fn();

		renderWithTheme(<DeleteKeywordsModal isOpen={true} toggleModal={jest.fn()} deleteKeyword={deleteKeywordMock} />);

		const deleteButton = screen
			.getAllByText("Delete keyword")
			.map((el) => el.closest("button"))
			.find(Boolean);
		expect(deleteButton).toBeTruthy();
		deleteButton && fireEvent.click(deleteButton);
		expect(deleteKeywordMock).toBeCalled();
	});

	it("should call toggleModal when Cancel button is clicked", () => {
		const toggleModalMock = jest.fn();

		renderWithTheme(<DeleteKeywordsModal isOpen={true} toggleModal={toggleModalMock} deleteKeyword={jest.fn()} />);

		const cancelButton = screen.getByText("Cancel").closest("button");
		expect(cancelButton).toBeTruthy();
		cancelButton && fireEvent.click(cancelButton);
		expect(toggleModalMock).toBeCalled();
	});
});
