import { FIRST_ARRAY_ELEMENT, SECOND_ARRAY_ELEMENT, THIRD_ARRAY_ELEMENT } from '@/constants/common';
import { bioEntityResponseFixture } from '@/models/fixtures/bioEntityContentsFixture';
import { apiPath } from '@/redux/apiPath';
import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
import { AppDispatch, RootState } from '@/redux/store';
import { BioEntityContent, TargetElement } from '@/types/models';
import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
import {
  InitialStoreState,
  getReduxStoreWithActionsListener,
} from '@/utils/testing/getReduxStoreActionsListener';
import { render, screen, waitFor } from '@testing-library/react';
import { HttpStatusCode } from 'axios';
import { MockStoreEnhanced } from 'redux-mock-store';
import { ElementsOnMapCell } from './ElementsOnMapCell.component';

interface Props {
  targets: TargetElement[];
}

const renderComponent = (
  props: Props,
  initialStoreState: InitialStoreState = {},
): { store: MockStoreEnhanced<Partial<RootState>, AppDispatch> } => {
  const { Wrapper, store } = getReduxStoreWithActionsListener(initialStoreState);

  return (
    render(
      <Wrapper>
        <ElementsOnMapCell targets={props.targets} />
      </Wrapper>,
    ),
    {
      store,
    }
  );
};

const mockedAxiosNewClient = mockNetworkNewAPIResponse();

const mockTargets = [
  { id: 1, modelId: 2, type: 'target-1' },
  { id: 2, modelId: 3, type: 'target-2' },
  { id: 3, modelId: 4, type: 'target-3' },
];

const getBioEntityContent = (elementId: string): BioEntityContent[] => [
  {
    ...bioEntityResponseFixture.content[FIRST_ARRAY_ELEMENT],
    bioEntity: {
      ...bioEntityResponseFixture.content[FIRST_ARRAY_ELEMENT].bioEntity,
      elementId,
    },
  },
];

describe('ElementsOnMapCell - component', () => {
  mockedAxiosNewClient
    .onGet(
      apiPath.getBioEntityContentsStringWithQuery({
        searchQuery: mockTargets[FIRST_ARRAY_ELEMENT].id.toString(),
        isPerfectMatch: true,
      }),
    )
    .reply(HttpStatusCode.Ok, {
      ...bioEntityResponseFixture,
      content: getBioEntityContent(mockTargets[FIRST_ARRAY_ELEMENT].type),
    });

  mockedAxiosNewClient
    .onGet(
      apiPath.getBioEntityContentsStringWithQuery({
        searchQuery: mockTargets[SECOND_ARRAY_ELEMENT].id.toString(),
        isPerfectMatch: true,
      }),
    )
    .reply(HttpStatusCode.Ok, {
      ...bioEntityResponseFixture,
      content: getBioEntityContent(mockTargets[SECOND_ARRAY_ELEMENT].type),
    });

  mockedAxiosNewClient
    .onGet(
      apiPath.getBioEntityContentsStringWithQuery({
        searchQuery: mockTargets[THIRD_ARRAY_ELEMENT].id.toString(),
        isPerfectMatch: true,
      }),
    )
    .reply(HttpStatusCode.Ok, {
      ...bioEntityResponseFixture,
      content: getBioEntityContent(mockTargets[THIRD_ARRAY_ELEMENT].type),
    });

  test.each(mockTargets)('should render correctly', async ({ type }) => {
    renderComponent(
      {
        targets: mockTargets,
      },
      INITIAL_STORE_STATE_MOCK,
    );

    await waitFor(() => {
      // type as elementId
      expect(screen.getByText(type)).toBeInTheDocument();
    });
  });
});