import React from "react";
import Axios from "axios";
import { ThemeProvider } from "styled-components";
import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";
import { mock } from "jest-mock-extended";
import { render, screen, cleanup, fireEvent } from "@testing-library/react";
import { act } from "react-dom/test-utils";
import MultiCheckSelectGroup, { IMultiCheckSelectGroupProps } from "@ax/components/Fields/MultiCheckSelectGroup";

afterEach(cleanup);

jest.mock("axios");
const mockedAxios = Axios as jest.MockedFunction<typeof Axios>;

const defaultProps = mock<IMultiCheckSelectGroupProps>();

describe("MultiCheckSelectGroup component rendering", () => {
	it("should render the component", () => {
		defaultProps.value = {
			NEWS_AREAS: [
				{
					label: "another page",
					name: "another page",
					value: 4168,
				},
			],
		};
		defaultProps.elements = [
			{
				source: "NEWS_AREAS",
				key: "NEWS_AREAS",
				placeholder: "News Areas",
				isGlobal: true,
			},
		];

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

		const multiCheckSelectWrapper = screen.getByTestId("multi-check-select-wrapper");

		expect(multiCheckSelectWrapper).toBeTruthy();
	});
});

describe("onChange events", () => {
	afterEach(() => {
		jest.resetAllMocks();
	});

	it("should call onChange", async () => {
		const onChange = jest.fn();
		defaultProps.value = {};
		defaultProps.note = "lorem ipsum";
		defaultProps.elements = [
			{
				source: "NEWS_AREAS",
				key: "NEWS_AREAS",
				placeholder: "News Areas",
			},
		];

		const Component = (
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<MultiCheckSelectGroup {...defaultProps} onChange={onChange} />
			</ThemeProvider>
		);

		const data = {
			data: [
				{
					value: 4168,
					label: "another page",
					name: "another page",
				},
				{
					value: 4111,
					label: "New Page",
					name: "New Page",
				},
			],
			status: 200,
			statusText: "Ok",
			headers: {},
			config: {},
		};

		mockedAxios.mockResolvedValue(data);

		const { rerender } = render(Component);

		const field = screen.getByTestId("field");

		await act(async () => {
			fireEvent.click(field);
		});

		rerender(Component);

		const checkFieldInputs = screen.getAllByTestId("check-field-input");

		await act(async () => {
			fireEvent.click(checkFieldInputs[0]);
		});

		expect(onChange).toBeCalledWith({
			NEWS_AREAS: [
				{
					label: "another page",
					name: "another page",
					value: 4168,
				},
			],
		});
	});

	/*it("should call onChange with empty object", async () => {
    const onChange = jest.fn();
    defaultProps.value = {};
    defaultProps.note = "lorem ipsum";
    defaultProps.elements = [
      {
        source: "NEWS_AREAS",
        key: "NEWS_AREAS",
        placeholder: "News Areas",
      },
    ];

    const Component = (
      <ThemeProvider theme={parseTheme(globalTheme)}>
        <MultiCheckSelectGroup {...defaultProps} onChange={onChange} />
      </ThemeProvider>
    );

    const data = {
      data: [
        {
          value: 4168,
          label: "another page",
          name: "another page",
        },
        {
          value: 4111,
          label: "New Page",
          name: "New Page",
        },
      ],
      status: 200,
      statusText: "Ok",
      headers: {},
      config: {},
    };

    mockedAxios.mockResolvedValue(data);

    const { rerender } = render(Component);

    const field = screen.getByTestId("field");

    await act(async () => {
      fireEvent.click(field);
    });

    rerender(Component);

    const checkFieldInputs = screen.getAllByTestId("check-field-input");

    await act(async () => {
      fireEvent.click(checkFieldInputs[0]);
    });

    await act(async () => {
      fireEvent.click(checkFieldInputs[0]);
    });

    expect(onChange).toBeCalledWith({});
  });*/
});
