import * as React from "react";
import { ThemeProvider } from "styled-components";
import { parseTheme } from "@ax/helpers";
import { mock } from "jest-mock-extended";
import configureStore from "redux-mock-store";

import globalTheme from "@ax/themes/theme.json";
import TableList, { ITableListProps } from "@ax/components/TableList";
import { render, cleanup, screen } from "../../../../config/jest/test-utils";

afterEach(() => {
	cleanup();
	jest.resetAllMocks();
});

const initialStore = {
	app: {
		isLoading: false,
	},
};

const mockStore = configureStore();
const defaultProps = mock<ITableListProps>();
const setPage = jest.fn();

const pagination = { currPage: 1, itemsPerPage: 50, setPage: setPage, totalItems: 3 };

describe("TableList", () => {
	it("should render the component", async () => {
		defaultProps.pagination = pagination;
		const initialState = { ...initialStore, ...defaultProps };
		const store = mockStore(initialStore);

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<TableList {...initialState} />
			</ThemeProvider>,
			{ store },
		);

		const tableList = screen.getByTestId("table-list");

		expect(tableList).toBeTruthy();
	});

	it("should have sticky style when header is fixed", async () => {
		defaultProps.pagination = pagination;
		defaultProps.hasFixedHeader = true;
		const initialState = { ...initialStore, ...defaultProps };
		const store = mockStore(initialStore);

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<TableList {...initialState} />
			</ThemeProvider>,
			{ store },
		);

		const tableListHeader = screen.getByTestId("table-list-header");
		expect(tableListHeader).toBeTruthy();
		const styles = getComputedStyle(tableListHeader);
		expect(styles.position).toEqual("sticky");
	});

	it("should display loader if it's loading", async () => {
		defaultProps.pagination = pagination;
		defaultProps.hasFixedHeader = true;
		const initialState = { ...initialStore, ...defaultProps };
		const store = mockStore({ app: { isLoading: true } });

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<TableList {...initialState} />
			</ThemeProvider>,
			{ store },
		);

		const loader = screen.getByTestId("loading-wrapper");
		const tableBody = screen.queryByTestId("table-body");
		expect(loader).toBeTruthy();
		expect(tableBody).toBeFalsy();
	});

	it("should display table body if isLoading is false", async () => {
		defaultProps.pagination = pagination;
		defaultProps.hasFixedHeader = true;
		const store = mockStore(initialStore);
		const initialState = { ...initialStore, ...defaultProps };

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<TableList {...initialState} />
			</ThemeProvider>,
			{ store },
		);

		const loader = screen.queryByTestId("loading-wrapper");
		const tableBody = screen.getByTestId("table-body");
		expect(tableBody).toBeTruthy();
		expect(loader).toBeFalsy();
	});

	it("should display paginator when totalItems is greater than itemsPerPage", async () => {
		defaultProps.pagination = { currPage: 1, itemsPerPage: 50, setPage: setPage, totalItems: 60 };
		defaultProps.hasFixedHeader = true;
		const store = mockStore(initialStore);
		const initialState = { ...initialStore, ...defaultProps };

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<TableList {...initialState} />
			</ThemeProvider>,
			{ store },
		);

		const pagination = screen.getByTestId("table-body");
		expect(pagination).toBeTruthy();
	});
});
