import React, { useContext } from 'react';
import Icon from '../../../shared/components/icon';
import { useDispatch, useSelector } from 'react-redux';
import { SearchResultsRootState } from '../../store/search-results-store';
import { setActiveTab } from '../../store/search-results-slice';
import { getTranslations } from '../../../shared/utils/localization-util';
import SearchResultsConfigurationContext from '../../search-results-configuration-context';
import { PortalQsmType } from '@qite/tide-client';

interface TabViewsProps {}

const TabViews: React.FC<TabViewsProps> = () => {
  const context = useContext(SearchResultsConfigurationContext);
  const translations = getTranslations(context?.languageCode ?? 'en-GB');

  const dispatch = useDispatch();

  const { activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);

  const handleSortChange = (tab: string) => {
    dispatch(setActiveTab(tab));
  };

  return (
    <div className="search__results__tab-views">
      <button
        type="button"
        className={`search__results__tab-view ${activeTab === 'extended' ? 'search__results__tab-view--active' : ''}`}
        onClick={() => handleSortChange('extended')}>
        <Icon name="ui-extended" height={16} />
        {translations.SRP.EXTENDED}
      </button>
      {context?.searchConfiguration.qsmType !== PortalQsmType.GroupTour && (
        <button
          type="button"
          className={`search__results__tab-view ${activeTab === 'compact' ? 'search__results__tab-view--active' : ''}`}
          onClick={() => handleSortChange('compact')}>
          <Icon name="ui-compact" height={16} />
          {translations.SRP.COMPACT}
        </button>
      )}
      <button
        type="button"
        className={`search__results__tab-view ${activeTab === 'list' ? 'search__results__tab-view--active' : ''}`}
        onClick={() => handleSortChange('list')}>
        <Icon name="ui-list" height={16} />
        {translations.SRP.LIST}
      </button>
    </div>
  );
};

export default TabViews;