import React, { useContext, useEffect } from 'react';
import Spinner from '../spinner/spinner';
import SearchResultsConfigurationContext from '../../search-results-configuration-context';
import { getTranslations } from '../../../shared/utils/localization-util';
import { SearchResultsRootState } from '../../store/search-results-store';
import { useDispatch, useSelector } from 'react-redux';
import { isEmpty } from 'lodash';
import GroupTourCard from './group-tour-card';
import { setActiveTab } from '../../store/search-results-slice';

interface GroupTourResultsProps {
  isLoading: boolean;
}

const GroupTourResults: React.FC<GroupTourResultsProps> = ({ isLoading }) => {
  const context = useContext(SearchResultsConfigurationContext);
  if (!context) {
    return null;
  }

  if (isLoading) {
    return <>{context.customSpinner ?? <Spinner />}</>;
  }

  const translations = getTranslations(context.languageCode ?? 'en-GB');
  const { filteredResults, activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
  const dispatch = useDispatch();

  if (isEmpty(filteredResults)) {
    return <div className="no-results">{translations.SRP.NO_RESULTS}</div>;
  }

  useEffect(() => {
    if (activeTab === 'compact') {
      dispatch(setActiveTab('list'));
    }
  }, [activeTab]);

  const cmsMap = React.useMemo(() => {
    const map = new Map();

    context.cmsGroupTourData?.forEach((item) => {
      const code = item?.content?.introductie?.data?.code;
      if (code) {
        map.set(code, item);
      }
    });

    return map;
  }, [context.cmsGroupTourData]);

  return (
    <div className={`search__results__cards search__results__cards--${activeTab}`}>
      {filteredResults.map((result, index) => {
        const cmsItem = cmsMap.get(result.code);
        return <GroupTourCard key={index} result={result} cmsItem={cmsItem} />;
      })}
    </div>
  );
};

export default GroupTourResults;