import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
import { AppDispatch, RootState } from '@/redux/store';
import { BioEntity } from '@/types/models';
import {
  InitialStoreState,
  getReduxStoreWithActionsListener,
} from '@/utils/testing/getReduxStoreActionsListener';
import { render, screen, waitFor } from '@testing-library/react';
import { MockStoreEnhanced } from 'redux-mock-store';
import { bioEntityFixture } from '@/models/fixtures/bioEntityFixture';
import { isReactionBioEntity } from '@/redux/reactions/isReactionBioentity';
import { ElementsOnMapCell } from './ElementsOnMapCell.component';

interface Props {
  targets: BioEntity[];
}

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 elementFixture = { ...bioEntityFixture, idReaction: undefined };
const reactionFixture = { ...bioEntityFixture, idReaction: '123' };

const mockTargets = [{ ...elementFixture }, { ...reactionFixture }];

describe('ElementsOnMapCell - component', () => {
  test.each(mockTargets)('should render correctly', async bioEntity => {
    renderComponent(
      {
        targets: mockTargets,
      },
      INITIAL_STORE_STATE_MOCK,
    );

    await waitFor(() => {
      // type as elementId
      const isReaction = isReactionBioEntity(bioEntity);
      const prefix = isReaction ? 'Reaction: ' : 'Element: ';
      expect(screen.getByText(prefix + bioEntity.elementId)).toBeInTheDocument();
    });
  });
});