/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/interactive-supports-focus */
import {
  getDefaultSearchTab,
  getSearchValuesArrayAndTrimToSeven,
} from '@/components/FunctionalArea/TopBar/SearchBar/SearchBar.utils';
import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
import { targetElementLeanResponseSchema } from '@/models/targetElementLeanResponseSchema';
import { apiPath } from '@/redux/apiPath';
import { BIO_ENTITY_FETCHING_ERROR_PREFIX } from '@/redux/bioEntity/bioEntity.constants';
import { openSearchDrawerWithSelectedTab } from '@/redux/drawer/drawer.slice';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { mapModelIdSelector, mapOpenedMapsSelector } from '@/redux/map/map.selectors';
import { openMapAndSetActive, setActiveMap } from '@/redux/map/map.slice';
import { closeModal } from '@/redux/modal/modal.slice';
import { modelsNameMapSelector } from '@/redux/models/models.selectors';
import { getSearchData } from '@/redux/search/search.thunks';
import { axiosInstanceNewAPI } from '@/services/api/utils/axiosInstance';
import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
import { LoadingIndicator } from '@/shared/LoadingIndicator';
import { BioEntityContent, BioEntityResponse, TargetElement } from '@/types/models';
import { getErrorMessage } from '@/utils/getErrorMessage';
import { showToast } from '@/utils/showToast';
import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
import { useEffect, useState } from 'react';

interface Props {
  target: TargetElement;
}

export const ElementLink = ({ target }: Props): JSX.Element => {
  const dispatch = useAppDispatch();
  const openedMaps = useAppSelector(mapOpenedMapsSelector);
  const currentModelId = useAppSelector(mapModelIdSelector);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [data, setData] = useState<BioEntityContent | undefined>(undefined);
  const elementId = data?.bioEntity.elementId;
  const mapsNames = useAppSelector(modelsNameMapSelector);

  const isMapAlreadyOpened = (modelId: number): boolean =>
    openedMaps.some(map => map.modelId === modelId);

  const fetchElementLinkData = async (searchQuery: string): Promise<void> => {
    try {
      const response = await axiosInstanceNewAPI
        .get<BioEntityResponse>(
          apiPath.getBioEntityContentsStringWithQuery({
            searchQuery,
            isPerfectMatch: true,
          }),
        )
        .finally(() => {
          setIsLoading(false);
        });

      const isDataValid = validateDataUsingZodSchema(
        response.data,
        targetElementLeanResponseSchema,
      );

      if (isDataValid && response.data.content?.[FIRST_ARRAY_ELEMENT]) {
        setData(response.data.content[FIRST_ARRAY_ELEMENT]);
      }
    } catch (error) {
      const errorMessage = getErrorMessage({
        error,
        prefix: BIO_ENTITY_FETCHING_ERROR_PREFIX,
      });

      showToast({
        type: 'error',
        message: errorMessage,
      });
    }
  };

  const searchForElementAndOpenDrawer = (): void => {
    if (!elementId) return;

    const searchValues = getSearchValuesArrayAndTrimToSeven(elementId);
    dispatch(getSearchData({ searchQueries: searchValues, isPerfectMatch: false }));
    dispatch(openSearchDrawerWithSelectedTab(getDefaultSearchTab(searchValues)));
  };

  const openSubmap = (): void => {
    if (isMapAlreadyOpened(target.modelId)) {
      dispatch(setActiveMap({ modelId: target.modelId }));
    } else {
      dispatch(
        openMapAndSetActive({ modelId: target.modelId, modelName: mapsNames[target.modelId] }),
      );
    }

    if (currentModelId !== target.modelId) {
      PluginsEventBus.dispatchEvent('onSubmapClose', currentModelId);
      PluginsEventBus.dispatchEvent('onSubmapOpen', target.modelId);
    }
  };

  const handleElementLinkClick = (): void => {
    dispatch(closeModal());
    searchForElementAndOpenDrawer();
    openSubmap();
  };

  useEffect(() => {
    fetchElementLinkData(`${target.id}`);
  }, [target.id]);

  if (isLoading) {
    return <LoadingIndicator />;
  }

  return (
    <div
      className="inline-block cursor-pointer underline"
      role="button"
      onClick={handleElementLinkClick}
    >
      {elementId}
    </div>
  );
};