import React, { useContext, useEffect, useState } from 'react';
import SearchResultsConfigurationContext from '../../search-results-configuration-context';

import ItemPicker from '../item-picker';

import Icon from '../../../shared/components/icon';
import { findSortByType, getSortingName, getTranslations } from '../../../shared/utils/localization-util';
import FlightSelection from '../flight/flight-selection/index';
import { useFlightSearch } from '../flight/flight-search-context';
import FlightFilters from '../filters/flight-filters';
import { ExtendedFlightSearchResponseItem, FlightSelectionMode } from '../../types';
import Spinner from '../spinner/spinner';
import { PortalQsmType } from '@qite/tide-client';

interface FlightResultsContainerProps {
  isMobile: boolean;
}

const selectionTypes: { id: FlightSelectionMode; label: string }[] = [
  { id: 'independent', label: 'Independent Selection' },
  { id: 'paired', label: 'Paired Selection' }
];

const FlightResultsContainer: React.FC<FlightResultsContainerProps> = ({ isMobile }) => {
  const context = useContext(SearchResultsConfigurationContext);
  const translations = getTranslations(context?.languageCode ?? 'en-GB');

  const { flightsLoading, onFlightSearch, filteredResults, isHubReady, sortByTypes, selectedSortByType, setSelectedSortByType, searchRequestId } =
    useFlightSearch();

  const [filtersOpen, setFiltersOpen] = useState(false);
  const [results, setResults] = React.useState<ExtendedFlightSearchResponseItem[]>([]);
  const [flightSelectionType, setFlightSelectionType] = useState<FlightSelectionMode>('independent');

  const handleSortChange = (sortKey: string, direction?: string) => {
    setSelectedSortByType(findSortByType(sortByTypes, sortKey, direction ?? 'asc'));
  };

  useEffect(() => {
    if (!context?.showMockup) {
      if (context?.searchConfiguration.qsmType === PortalQsmType.Flight && isHubReady) {
        onFlightSearch();
      }
    }
  }, [location.search, isHubReady]);

  useEffect(() => {
    setResults(filteredResults.filter((item) => item.requestId === searchRequestId));
  }, [filteredResults, searchRequestId]);

  return (
    <>
      {context?.showFilters && <FlightFilters isOpen={filtersOpen} handleSetIsOpen={() => setFiltersOpen(!filtersOpen)} isLoading={flightsLoading} />}
      {/* ---------------- Results ---------------- */}
      <div className="search__results">
        <>
          {isMobile && (
            <div className="search__result-row">
              <div className="search__results__actions">
                {context?.showFilters && (
                  <div className="cta cta--filter" onClick={() => setFiltersOpen(true)}>
                    <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
                    {translations.SRP.FILTERS}
                  </div>
                )}
              </div>
              {sortByTypes && sortByTypes.length > 0 && (
                <ItemPicker
                  items={sortByTypes}
                  selection={selectedSortByType?.label || undefined}
                  selectedSortByType={selectedSortByType || undefined}
                  label={translations.SRP.SORTBY}
                  placeholder={translations.SRP.SORTBY}
                  classModifier="travel-class-picker__items"
                  valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
                  onPick={handleSortChange}
                />
              )}
            </div>
          )}

          <div className="search__result-row">
            <span className="search__result-row-text">
              {!flightsLoading && (
                <>
                  {results?.length && (
                    <>
                      {results.length} {translations.SRP.TOTAL_RESULTS_LABEL}
                    </>
                  )}
                </>
              )}
            </span>
            {!isMobile && (
              <>
                <div className="search__result-row-filter">
                  <ItemPicker
                    items={selectionTypes}
                    selection={selectionTypes.find((type) => type.id === flightSelectionType)?.label || undefined}
                    label="Selection Type"
                    placeholder="Selection Type"
                    classModifier="travel-class-picker__items"
                    valueFormatter={(value) => value}
                    onPick={(value) => setFlightSelectionType(selectionTypes.find((type) => type.label === value)?.id || 'independent')}
                  />
                </div>
                {sortByTypes && sortByTypes.length > 0 && (
                  <div className="search__result-row-filter">
                    <ItemPicker
                      items={sortByTypes}
                      selection={selectedSortByType?.label || undefined}
                      selectedSortByType={selectedSortByType || undefined}
                      label={translations.SRP.SORTBY}
                      placeholder={translations.SRP.SORTBY}
                      classModifier="travel-class-picker__items"
                      valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
                      onPick={handleSortChange}
                    />
                  </div>
                )}
              </>
            )}
          </div>

          <div className="search__results__wrapper">
            {flightsLoading && <Spinner label={translations.SRP.LOADING_FLIGHTS} />}
            {context?.searchConfiguration.qsmType == PortalQsmType.Flight && context?.showFlightAccommodationResults && results && results.length > 0 && (
              <FlightSelection searchResults={results} flightSelectionType={flightSelectionType} />
            )}
          </div>
        </>
      </div>
    </>
  );
};

export default FlightResultsContainer;