import * as React from "react";

import { ThemeProvider } from "styled-components";
import { mock } from "jest-mock-extended";

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

import globalTheme from "@ax/themes/theme.json";
import Tag, { ITagProps } from "@ax/components/Tag";

afterEach(cleanup);

const defaultProps = mock<ITagProps>();

describe("Tag component rendering", () => {
	it("should render status tag when type is defined as 'status'", () => {
		defaultProps.type = "status";
		defaultProps.text = "Modules";

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Tag {...defaultProps} />
			</ThemeProvider>,
		);

		const tagStatus = screen.getByTestId("tag-status");
		expect(tagStatus).toBeTruthy();
	});

	it("should render fixed tag when type is defined as 'fixed'", () => {
		defaultProps.type = "fixed";
		defaultProps.text = "Modules";

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Tag {...defaultProps} />
			</ThemeProvider>,
		);

		const tagFixed = screen.getByTestId("tag-fixed");
		expect(tagFixed).toBeTruthy();
	});

	it("should render square tag when type is defined as 'square'", () => {
		defaultProps.type = "square";
		defaultProps.text = "Modules";

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Tag {...defaultProps} />
			</ThemeProvider>,
		);

		const tagSquare = screen.getByTestId("tag-square");
		expect(tagSquare).toBeTruthy();
	});

	it("should render fixed tag when type is not defined", () => {
		defaultProps.text = "Modules";
		defaultProps.type = undefined;

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Tag {...defaultProps} />
			</ThemeProvider>,
		);

		const tagFixed = screen.getByTestId("tag-fixed");
		expect(tagFixed).toBeTruthy();
	});

	it("should render text", () => {
		defaultProps.type = "fixed";
		defaultProps.text = "Modules";

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Tag {...defaultProps} />
			</ThemeProvider>,
		);

		const tagFixedTitle = screen.getByTestId("tag-fixed-title");
		expect(tagFixedTitle).toBeTruthy();
		expect(tagFixedTitle.textContent).toEqual("Modules");
	});

	it("should render delete icon when onDeleteAction is defined", () => {
		defaultProps.type = "fixed";
		defaultProps.text = "Modules";
		const deleteAction = jest.fn();
		defaultProps.onDeleteAction = deleteAction;

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Tag {...defaultProps} />
			</ThemeProvider>,
		);

		const deleteIconWrapper = screen.getByTestId("delete-icon-wrapper");
		expect(deleteIconWrapper).toBeTruthy();
	});
});

describe("Tag component events", () => {
	it("should called deleteAction when click delete button", () => {
		defaultProps.type = "fixed";
		defaultProps.text = "Modules";
		const deleteAction = jest.fn();
		defaultProps.onDeleteAction = deleteAction;

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Tag {...defaultProps} />
			</ThemeProvider>,
		);

		const deleteIconWrapper = screen.getByTestId("delete-icon-wrapper");
		expect(deleteIconWrapper).toBeTruthy();
		fireEvent.click(deleteIconWrapper);
		expect(deleteAction).toBeCalled();
	});

	it("should set background color when color is defined", () => {
		defaultProps.type = "fixed";
		defaultProps.text = "Modules";
		defaultProps.color = "rgba(80, 87, 255, 0.16)";

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Tag {...defaultProps} />
			</ThemeProvider>,
		);

		const tagFixed = screen.getByTestId("tag-fixed");
		expect(tagFixed).toBeTruthy();
		const styles = getComputedStyle(tagFixed);
		expect(styles.backgroundColor).toEqual("rgba(80, 87, 255, 0.16)");
	});
});
