import * as React from "react";
import { BrowserRouter } from "react-router-dom";

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

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

afterEach(cleanup);

describe("MainWrapper component rendering", () => {
	it("should render the component with children", () => {
		const defaultProps: IWrapperProps = {
			title: "the title",
			children: <div>the children</div>,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<MainWrapper {...defaultProps} />
			</ThemeProvider>,
			{ wrapper: BrowserRouter },
		);

		const wrapper = screen.getByTestId("main-wrapper");
		expect(wrapper).toBeTruthy();
	});

	it("should render the component without children", () => {
		const defaultProps: IWrapperProps = {
			title: "the title",
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<MainWrapper {...defaultProps} />
			</ThemeProvider>,
			{ wrapper: BrowserRouter },
		);

		const wrapper = screen.getByTestId("main-wrapper");
		expect(wrapper).toBeTruthy();
	});

	it("should add padding top if fixedAppBar", () => {
		const defaultProps: IWrapperProps = {
			title: "the title",
			fixedAppBar: true,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<MainWrapper {...defaultProps} />
			</ThemeProvider>,
			{ wrapper: BrowserRouter },
		);

		const wrapper = screen.getByTestId("main-wrapper");
		expect(wrapper).toBeTruthy();
		expect(wrapper).toHaveStyle(`padding-top: 64px`);
	});

	it("should add padding top if fixedAppBar", () => {
		const defaultProps: IWrapperProps = {
			title: "the title",
			fixedAppBar: true,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<MainWrapper {...defaultProps} />
			</ThemeProvider>,
			{ wrapper: BrowserRouter },
		);

		const wrapper = screen.getByTestId("main-wrapper");
		expect(wrapper).toBeTruthy();
		expect(wrapper).toHaveStyle(`padding-top: 64px`);
	});

	it("should have padding top 0 if fixedAppBar is false", () => {
		const defaultProps: IWrapperProps = {
			title: "the title",
			fixedAppBar: false,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<MainWrapper {...defaultProps} />
			</ThemeProvider>,
			{ wrapper: BrowserRouter },
		);

		const wrapper = screen.getByTestId("main-wrapper");
		expect(wrapper).toBeTruthy();
		expect(wrapper).toHaveStyle(`padding-top: 0`);
	});

	it("main should have overflow visible if fullwidth", () => {
		const defaultProps: IWrapperProps = {
			title: "the title",
			fullWidth: true,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<MainWrapper {...defaultProps} />
			</ThemeProvider>,
			{ wrapper: BrowserRouter },
		);

		const main = screen.getByTestId("main-component");
		expect(main).toBeTruthy();
		expect(main).toHaveStyle(`overflow: visible`);
	});

	it("main should have overflow auto if not fullwidth", () => {
		const defaultProps: IWrapperProps = {
			title: "the title",
			fullWidth: false,
		};

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<MainWrapper {...defaultProps} />
			</ThemeProvider>,
			{ wrapper: BrowserRouter },
		);

		const main = screen.getByTestId("main-component");
		expect(main).toBeTruthy();
		expect(main).toHaveStyle(`overflow: auto`);
	});
});
