import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
import { bioEntityResponseFixture } from '@/models/fixtures/bioEntityContentsFixture';
import { modelsFixture } from '@/models/fixtures/modelsFixture';
import { apiPath } from '@/redux/apiPath';
import { DEFAULT_POSITION } from '@/redux/map/map.constants';
import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
import { AppDispatch, RootState } from '@/redux/store';
import { 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 MapBackgroundsEnum from '@/redux/map/map.enums';
import { ElementLink } from './ElementLink.component';

const mockedAxiosNewClient = mockNetworkNewAPIResponse();

const TARGET_ELEMENT: TargetElement = {
  id: 123,
  modelId: 52,
  type: 'REACTION',
};

interface Props {
  target: TargetElement;
}

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

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

describe('ElementLink - component', () => {
  describe('when initialized', () => {
    beforeEach(() => {
      renderComponent({ target: TARGET_ELEMENT }, INITIAL_STORE_STATE_MOCK);
    });

    it('should show loading indicator', () => {
      const loadingIndicator = screen.getByAltText('spinner icon');

      expect(loadingIndicator).toBeInTheDocument();
    });
  });

  describe('when loaded', () => {
    mockedAxiosNewClient
      .onGet(
        apiPath.getBioEntityContentsStringWithQuery({
          searchQuery: TARGET_ELEMENT.id.toString(),
          isPerfectMatch: true,
        }),
      )
      .reply(HttpStatusCode.Ok, bioEntityResponseFixture);

    beforeEach(() => {
      renderComponent({ target: TARGET_ELEMENT }, INITIAL_STORE_STATE_MOCK);
    });

    it('should not show loading indicator', async () => {
      const loadingIndicator = screen.getByAltText('spinner icon');

      await waitFor(() => {
        expect(loadingIndicator).not.toBeInTheDocument();
      });
    });

    it('should should show element id', async () => {
      const { elementId } = bioEntityResponseFixture.content[FIRST_ARRAY_ELEMENT].bioEntity;

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

  describe('when clicked (currentModel different than target model)', () => {
    mockedAxiosNewClient
      .onGet(
        apiPath.getBioEntityContentsStringWithQuery({
          searchQuery: TARGET_ELEMENT.id.toString(),
          isPerfectMatch: true,
        }),
      )
      .reply(HttpStatusCode.Ok, bioEntityResponseFixture);

    it('should close modal, search for element, open drawer and open submap on link click', async () => {
      const { store } = renderComponent(
        { target: TARGET_ELEMENT },
        {
          ...INITIAL_STORE_STATE_MOCK,
          models: {
            ...INITIAL_STORE_STATE_MOCK.models,
            data: [
              {
                ...modelsFixture[FIRST_ARRAY_ELEMENT],
                idObject: TARGET_ELEMENT.modelId,
              },
            ],
          },
        },
      );

      const { elementId } = bioEntityResponseFixture.content[FIRST_ARRAY_ELEMENT].bioEntity;

      await waitFor(() => {
        const link = screen.getByText(elementId);
        link.click();

        const actions = store.getActions();

        // close modal
        expect(actions).toEqual(
          expect.arrayContaining([
            expect.objectContaining({
              payload: undefined,
              type: 'modal/closeModal',
            }),
          ]),
        );

        // search for element
        expect(actions).toEqual(
          expect.arrayContaining([
            expect.objectContaining({
              payload: undefined,
              type: 'project/getSearchData/pending',
            }),
          ]),
        );

        // open drawer
        expect(actions).toEqual(
          expect.arrayContaining([
            expect.objectContaining({
              payload: elementId,
              type: 'drawer/openSearchDrawerWithSelectedTab',
            }),
          ]),
        );

        // open submap
        expect(actions).toEqual(
          expect.arrayContaining([
            expect.objectContaining({
              payload: {
                modelId: TARGET_ELEMENT.modelId,
                modelName: modelsFixture[FIRST_ARRAY_ELEMENT].name,
              },
              type: 'map/openMapAndSetActive',
            }),
          ]),
        );
      });
    });
  });

  describe('when clicked (currentModel the same as target model)', () => {
    mockedAxiosNewClient
      .onGet(
        apiPath.getBioEntityContentsStringWithQuery({
          searchQuery: TARGET_ELEMENT.id.toString(),
          isPerfectMatch: true,
        }),
      )
      .reply(HttpStatusCode.Ok, bioEntityResponseFixture);

    it('should close modal, search for element, open drawer and set submap on link click', async () => {
      const { store } = renderComponent(
        { target: TARGET_ELEMENT },
        {
          ...INITIAL_STORE_STATE_MOCK,
          models: {
            ...INITIAL_STORE_STATE_MOCK.models,
            data: [
              {
                ...modelsFixture[FIRST_ARRAY_ELEMENT],
                idObject: TARGET_ELEMENT.modelId,
              },
            ],
          },
          map: {
            ...INITIAL_STORE_STATE_MOCK.map,
            data: {
              ...INITIAL_STORE_STATE_MOCK.map.data,
              modelId: modelsFixture[FIRST_ARRAY_ELEMENT].idObject,
            },
            openedMaps: [
              {
                modelId: TARGET_ELEMENT.modelId,
                modelName: modelsFixture[FIRST_ARRAY_ELEMENT].name,
                lastPosition: DEFAULT_POSITION,
              },
            ],
            backgroundType: MapBackgroundsEnum.SEMANTIC,
          },
        },
      );

      const { elementId } = bioEntityResponseFixture.content[FIRST_ARRAY_ELEMENT].bioEntity;

      await waitFor(() => {
        const link = screen.getByText(elementId);
        link.click();

        const actions = store.getActions();

        // close modal
        expect(actions).toEqual(
          expect.arrayContaining([
            expect.objectContaining({
              payload: undefined,
              type: 'modal/closeModal',
            }),
          ]),
        );

        // search for element
        expect(actions).toEqual(
          expect.arrayContaining([
            expect.objectContaining({
              payload: undefined,
              type: 'project/getSearchData/pending',
            }),
          ]),
        );

        // open drawer
        expect(actions).toEqual(
          expect.arrayContaining([
            expect.objectContaining({
              payload: elementId,
              type: 'drawer/openSearchDrawerWithSelectedTab',
            }),
          ]),
        );

        // set submap
        expect(actions).toEqual(
          expect.arrayContaining([
            expect.objectContaining({
              payload: {
                modelId: TARGET_ELEMENT.modelId,
              },
              type: 'map/setActiveMap',
            }),
          ]),
        );
      });
    });
  });
});