import * as React from "react";
import { ThemeProvider } from "styled-components";
import { render, cleanup, screen } from "@testing-library/react";
import "@testing-library/jest-dom";

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

afterEach(cleanup);

describe("Avatar component rendering", () => {
	it("should render the component with name and image", () => {
		const props = {
			name: "Ignatius Reilly",
			image: "https://images.dev.griddo.io/w/215/h/161/descarga-1",
		};

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

		const avatarWrapper = screen.getByTestId("avatar-wrapper");
		const avatar = screen.getByTestId("avatar");

		expect(avatarWrapper).toBeTruthy();
		expect(avatar).toHaveStyle(`width: 32px; height: 32px`);
		expect(avatar).toHaveStyle(
			`background: url("https://images.dev.griddo.io/w/215/h/161/descarga-1") center center / cover no-repeat, rgb(230, 231, 248)`,
		);
	});

	it("should render the component only with name", () => {
		const props = {
			name: "Ignatius Reilly",
			image: undefined,
		};

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

		const avatar = screen.getByTestId<HTMLElement>("avatar");
		expect(avatar).toBeTruthy();
		expect(avatar).toHaveStyle(`background: url(undefined) center center / cover no-repeat, rgb(230, 231, 248)`);
	});

	it("should render the component with image null", () => {
		const props = {
			name: "Ignatius Reilly",
			image: null,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Avatar {...props} />
			</ThemeProvider>,
		);
		const avatarWrapper = screen.getByTestId("avatar-wrapper");
		const avatar = screen.getByTestId("avatar");
		expect(avatarWrapper).toBeTruthy();
		expect(avatar).toHaveStyle(`width: 32px; height: 32px`);
		expect(avatar).toHaveStyle(`background: url(null) center center / cover no-repeat, rgb(230, 231, 248)`);
	});

	it("should render the component without name or image", () => {
		const props = {
			name: undefined,
			image: undefined,
		};

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

		const avatarWrapper = screen.getByTestId("avatar-wrapper");
		const avatar = screen.queryByTestId("avatar");

		expect(avatarWrapper).toBeTruthy();
		expect(avatar).toBeTruthy();
	});

	it("should render the component with a wrong image url", () => {
		const props = {
			name: "Ignatius Reilly",
			image: "lolololololo",
		};

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

		const avatar = screen.queryByTestId("avatar");

		expect(avatar).toHaveStyle(`background: url(lolololololo) center center / cover no-repeat, rgb(230, 231, 248)`);
	});

	it("should render the component with an empty string as name", () => {
		const props = {
			name: "",
		};

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

		const avatar = screen.getByTestId("avatar");
		expect(avatar).toBeTruthy();
	});
});
