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

import DateField, { IDateFieldProps } from "@ax/components/Fields/DateField";
import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

const defaultProps = mock<IDateFieldProps>();

describe("DateField component rendering", () => {
	it("should render the component", () => {
		defaultProps.value = "values";
		defaultProps.mandatory = true;
		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;

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

		expect(screen.getByTestId("dateWrapper")).toBeTruthy();
	});

	it("should render the component receiving a date as a number", () => {
		defaultProps.value = 112233;
		defaultProps.mandatory = false;
		defaultProps.futureDate = false;
		defaultProps.pastDate = true;
		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;

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

		expect(screen.getByTestId("dateWrapper")).toBeTruthy();
	});

	it("should render the component not receiving a proper date", () => {
		defaultProps.value = undefined;
		defaultProps.futureDate = true;
		defaultProps.pastDate = false;
		defaultProps.mandatory = false;
		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;

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

		expect(screen.getByTestId("dateWrapper")).toBeTruthy();
	});

	it("should render the component receiving a range date", () => {
		defaultProps.value = "01/01/2022 - 10/01/2022";
		defaultProps.mandatory = false;
		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: any) => void>;

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

		expect(screen.getByTestId("dateWrapper")).toBeTruthy();
		expect(screen.getByDisplayValue("01/01/2022 - 10/01/2022")).toBeTruthy();
	});
});
