import React, { useContext, useEffect, useState } from 'react';
import { ExtendedFlightSearchResponseItem, FilterValue } from '../../types';
import MultiRangeFilter from '../multi-range-filter';
import SearchResultsConfigurationContext from '../../search-results-configuration-context';
import Icon from '../../../shared/components/icon';
import { durationInTicksInMinutes, getTranslations, minutesToHoursString, rangeFromDateTimeInMinutes } from '../../../shared/utils/localization-util';
import { useFlightSearch } from '../flight/flight-search-context';
import { first, isEmpty, last, orderBy } from 'lodash';
import { getArrivalSegment, getDepartureRangeName, getDepartureSegment, getNumberOfStops } from '../../utils/flight-utils';
import { DepartureRange } from '../../../shared/types';

interface FiltersProps {
  isOpen: boolean;
  handleSetIsOpen: () => void;
  isLoading?: boolean;
}

const FlightFilters: React.FC<FiltersProps> = ({ isOpen, handleSetIsOpen, isLoading }) => {
  const context = useContext(SearchResultsConfigurationContext);
  const translations = getTranslations(context?.languageCode ?? 'en-GB');
  const {
    flightSearchResults,
    filteredResults,
    searchRequestId,
    filters,
    setFilters,
    resetFilters,
    airlineResults,
    numberOfStopsResults,
    departureRangeResults,
    departureAirportsResults,
    arrivalAirportsResults,
    valuesManuallyChanged,
    setValuesManuallyChanged
  } = useFlightSearch();

  const [airlineFilterExpanded, setAirlineFilterExpanded] = useState<boolean>(true);
  const [airlineFilter, setAirlineFilter] = useState<FilterValue[]>([]);

  const [stopFilterExpanded, setStopFilterExpanded] = useState<boolean>(true);
  const [numberOfStopsFilter, setNumberOfStopsFilter] = useState<FilterValue[]>([]);

  const [departureFilterExpanded, setDepartureFilterExpanded] = useState<boolean>(true);
  const [departureRangeFilter, setDepartureRangeFilter] = useState<FilterValue[]>([]);

  const [departureAirportFilterExpanded, setDepartureAirportFilterExpanded] = useState<boolean>(true);
  const [departureAirportFilter, setDepartureAirportFilter] = useState<FilterValue[]>([]);

  const [arrivalAirportFilterExpanded, setArrivalAirportFilterExpanded] = useState<boolean>(true);
  const [arrivalAirportFilter, setArrivalAirportFilter] = useState<FilterValue[]>([]);

  const [durationFilterExpanded, setDurationFilterExpanded] = useState<boolean>(true);
  const [minTravelTime, setMinTravelTime] = useState<number>(0);
  const [maxTravelTime, setMaxTravelTime] = useState<number>(0);
  const [travelTimeRangeValues, setTravelTimeRangeValues] = useState<number[]>([]);

  const [priceFilterExpanded, setPriceFilterExpanded] = useState<boolean>(true);
  const [minPrice, setMinPrice] = useState<number>(0);
  const [maxPrice, setMaxPrice] = useState<number>(0);
  const [priceRangeValues, setPriceRangeValues] = useState<number[]>([]);

  useEffect(() => {
    const results = filteredResults.filter((item) => item.requestId === searchRequestId);
    if (!isEmpty(results)) {
      // airlines
      const airlinesMap = new Map<string, ExtendedFlightSearchResponseItem>();
      if (!isEmpty(airlineResults)) {
        airlineResults.map((result) => {
          const airline = result.airlineCode;

          if (!airlinesMap.has(airline) || result.price < airlinesMap.get(airline)!.price) {
            airlinesMap.set(airline, result);
          }
        });

        // check if filters.airlines has values, if so, make sure all selected filters are present in the airlinesMap
        const validAirlines = filters.airlines.filter((filter) => airlinesMap.has(filter.id.toString()));
        if (validAirlines.length !== filters.airlines.length) {
          setFilters({
            ...filters,
            airlines: validAirlines
          });
        }
      }
      // Convert the Map to an array of FilterValue
      const uniqueAirlines = Array.from(airlinesMap.entries()).map(
        ([airlineCode, flightItem]) =>
          ({
            id: airlineCode,
            name: flightItem.airlineName, // Use the airline name directly
            lowestPrice: flightItem.price
          } as FilterValue)
      );
      setAirlineFilter(orderBy(uniqueAirlines, ['name'], ['asc']));

      // number of stops
      // Group by numberOfStops and find the lowest price
      const stopsMap = new Map<number, number>();
      if (!isEmpty(numberOfStopsResults)) {
        numberOfStopsResults.map((result) => {
          let numberOfStops = getNumberOfStops(result.outward);
          if (numberOfStops > 2) {
            numberOfStops = 2;
          }

          if (!stopsMap.has(numberOfStops) || result.price < stopsMap.get(numberOfStops)!) {
            stopsMap.set(numberOfStops, result.price);
          }
        });
        // check if filters.numberOfStops has values, if so, make sure all selected filters are present in the stopsMap
        const validNumberOfStops = filters.numberOfStops.filter((filter) => stopsMap.has(Number(filter.id)));
        if (validNumberOfStops.length !== filters.numberOfStops.length) {
          setFilters({
            ...filters,
            numberOfStops: validNumberOfStops
          });
        }
      }
      // Convert the Map to an array of FilterValue
      const uniqueStops = Array.from(stopsMap.entries()).map(
        ([id, lowestPrice]) =>
          ({
            id: id,
            name: id.toString(), // Format the name
            lowestPrice: lowestPrice
          } as FilterValue)
      );
      setNumberOfStopsFilter(orderBy(uniqueStops, ['id'], ['asc']));

      // departureRange
      const departureRangeMap = new Map<DepartureRange, number>();
      if (!isEmpty(departureRangeResults)) {
        departureRangeResults.map((result) => {
          const departureRange = rangeFromDateTimeInMinutes(getDepartureSegment(result.outward)?.departureDateTime);
          if (!departureRangeMap.has(departureRange) || result.price < departureRangeMap.get(departureRange)!) {
            departureRangeMap.set(departureRange, result.price);
          }
        });
        // check if filters.departureRanges has values, if so, make sure all selected filters are present in the departureRangeMap
        const validDepartureRanges = filters.departureRanges.filter((filter) => departureRangeMap.has(Number(filter.id)));
        if (validDepartureRanges.length !== filters.departureRanges.length) {
          setFilters({
            ...filters,
            departureRanges: validDepartureRanges
          });
        }
      }
      // Convert the Map to an array of FilterValue
      const uniqueDepartureRanges = Array.from(departureRangeMap.entries()).map(
        ([range, lowestPrice]) =>
          ({
            id: range,
            name: getDepartureRangeName(translations, range),
            lowestPrice: lowestPrice
          } as FilterValue)
      );
      setDepartureRangeFilter(orderBy(uniqueDepartureRanges, ['id'], ['asc']));

      // departureAirports
      const departureAirportsMap = new Map<string, ExtendedFlightSearchResponseItem>();
      if (!isEmpty(departureAirportsResults)) {
        departureAirportsResults.map((result) => {
          const departureAirport = getDepartureSegment(result.outward)?.departureAirportCode;

          if (departureAirport) {
            if (!departureAirportsMap.has(departureAirport) || result.price < departureAirportsMap.get(departureAirport)!.price) {
              departureAirportsMap.set(departureAirport, result);
            }
          }
        });

        // check if filters.departureAirports has values, if so, make sure all selected filters are present in the departureAirportsMap
        const validDepartureAirports = filters.departureAirports.filter((filter) => departureAirportsMap.has(filter.id.toString()));
        if (validDepartureAirports.length !== filters.departureAirports.length) {
          setFilters({
            ...filters,
            departureAirports: validDepartureAirports
          });
        }
      }
      // Convert the Map to an array of FilterValue
      const uniqueDepartureAirports = Array.from(departureAirportsMap.entries()).map(
        ([departureAirport, flightItem]) =>
          ({
            id: departureAirport,
            name: getDepartureSegment(flightItem.outward)?.departureAirportName + ' (' + departureAirport + ')', // Use the departure airport name directly
            lowestPrice: flightItem.price
          } as FilterValue)
      );
      setDepartureAirportFilter(orderBy(uniqueDepartureAirports, ['name'], ['asc']));

      // arrivalAirports
      const arrivalAirportsMap = new Map<string, ExtendedFlightSearchResponseItem>();
      if (!isEmpty(arrivalAirportsResults)) {
        arrivalAirportsResults.map((result) => {
          const arrivalAirport = getArrivalSegment(result.outward)?.arrivalAirportCode;

          if (arrivalAirport) {
            if (!arrivalAirportsMap.has(arrivalAirport) || result.price < arrivalAirportsMap.get(arrivalAirport)!.price) {
              arrivalAirportsMap.set(arrivalAirport, result);
            }
          }
        });

        // check if filters.arrivalAirports has values, if so, make sure all selected filters are present in the arrivalAirportsMap
        const validArrivalAirports = filters.arrivalAirports.filter((filter) => arrivalAirportsMap.has(filter.id.toString()));
        if (validArrivalAirports.length !== filters.arrivalAirports.length) {
          setFilters({
            ...filters,
            arrivalAirports: validArrivalAirports
          });
        }
      }
      // Convert the Map to an array of FilterValue
      const uniqueArrivalAirports = Array.from(arrivalAirportsMap.entries()).map(
        ([arrivalAirport, flightItem]) =>
          ({
            id: arrivalAirport,
            name: getArrivalSegment(flightItem.outward)?.arrivalAirportName + ' (' + arrivalAirport + ')', // Use the arrival airport name directly
            lowestPrice: flightItem.price
          } as FilterValue)
      );
      setArrivalAirportFilter(orderBy(uniqueArrivalAirports, ['name'], ['asc']));
    } else {
      setNumberOfStopsFilter([]);
      setDepartureRangeFilter([]);
      setAirlineFilter([]);
      setDepartureAirportFilter([]);
    }
  }, [filteredResults, searchRequestId]);

  useEffect(() => {
    const results = flightSearchResults.filter((item) => item.requestId === searchRequestId);
    if (!isEmpty(results)) {
      // Travel time filter
      const minTravelTimeDuration = Math.min(...results.map((result) => result.outward.durationInTicks));
      const maxTravelTimeDuration = Math.max(...results.map((result) => result.outward.durationInTicks));
      const minTravelTimeValue = durationInTicksInMinutes(minTravelTimeDuration);
      const maxTravelTimeValue = durationInTicksInMinutes(maxTravelTimeDuration);
      setMinTravelTime(minTravelTimeValue);
      setMaxTravelTime(maxTravelTimeValue);
      if (!valuesManuallyChanged) {
        setTravelTimeRangeValues([minTravelTimeValue, maxTravelTimeValue]);
      }
      // price filter
      const minPriceValue = Math.min(...results.map((result) => result.price));
      const maxPriceValue = Math.max(...results.map((result) => result.price));
      setMinPrice(minPriceValue);
      setMaxPrice(maxPriceValue);
      if (!valuesManuallyChanged) {
        setPriceRangeValues([minPriceValue, maxPriceValue]);
      }
    }
  }, [flightSearchResults]);

  const adjustFilters = (type: string, value: FilterValue, checked: boolean) => {
    switch (type) {
      case 'Airlines':
        setFilters({
          ...filters,
          airlines: checked ? [...filters.airlines, value] : filters.airlines.filter((n) => n.id !== value.id)
        });
        return;
      case 'NumberOfStops':
        setFilters({
          ...filters,
          numberOfStops: checked ? [...filters.numberOfStops, value] : filters.numberOfStops.filter((n) => n.id !== value.id)
        });
        return;
      case 'DepartureRange':
        setFilters({
          ...filters,
          departureRanges: checked ? [...filters.departureRanges, value] : filters.departureRanges.filter((n) => n.id !== value.id)
        });
        return;
      case 'DepartureAirports':
        setFilters({
          ...filters,
          departureAirports: checked ? [...filters.departureAirports, value] : filters.departureAirports.filter((n) => n.id !== value.id)
        });
        return;
      case 'ArrivalAirports':
        setFilters({
          ...filters,
          arrivalAirports: checked ? [...filters.arrivalAirports, value] : filters.arrivalAirports.filter((n) => n.id !== value.id)
        });
        return;
    }
  };

  const changeCheckbox = (type: string, value: FilterValue, event: React.ChangeEvent<HTMLInputElement>) => {
    adjustFilters(type, value, event.target.checked);
  };

  const handleTravelTimeSliderChange = (values: number[] | number) => {
    setTravelTimeRangeValues(Array.isArray(values) ? values : [values, values]);
    setValuesManuallyChanged(true);

    onCompleteTravelTimeSliderChange(values);
  };

  const onCompleteTravelTimeSliderChange = (values: number[] | number) => {
    const ranges = Array.isArray(values) ? values : [values, values];
    const rangeFilters = ranges.map((value, index) => {
      return {
        id: index,
        name: 'travelTime',
        lowestPrice: value
      } as FilterValue;
    });
    setFilters({
      ...filters,
      travelTimes: rangeFilters
    });
  };

  const handlePriceSliderChange = (values: number[] | number) => {
    setPriceRangeValues(Array.isArray(values) ? values : [values, values]);
    setValuesManuallyChanged(true);

    onCompletePriceSliderChange(values);
  };

  const onCompletePriceSliderChange = (values: number[] | number) => {
    const ranges = Array.isArray(values) ? values : [values, values];
    const rangeFilters = ranges.map((value, index) => {
      return {
        id: index,
        name: 'price',
        lowestPrice: value
      } as FilterValue;
    });
    setFilters({
      ...filters,
      prices: rangeFilters
    });
  };

  const handleResetFilters = () => {
    resetFilters();
    setValuesManuallyChanged(false);
    setTravelTimeRangeValues([minTravelTime, maxTravelTime]);
    setPriceRangeValues([minPrice, maxPrice]);
  };

  return (
    <div className={`search__filters--modal ${isOpen ? 'is-open' : ''}`}>
      <div className="search__filters--background" onClick={() => handleSetIsOpen()}></div>
      <button className="search__filters--close" onClick={() => handleSetIsOpen()}>
        <Icon name="ui-close" height={24} />
      </button>
      <div className="search__filters">
        <div className="search__filter-row search__filter__header">
          <div className="search__filter-row-flex-title">
            <p className="search__filter-small-title">{translations.SRP.FILTERS}</p>
          </div>
          {!isLoading && (
            <a className="search__filter-reset" onClick={() => handleResetFilters()}>
              {translations.SRP.RESET}
            </a>
          )}
        </div>
        <>
          <div className="search__filters__group-container">
            {/* Airlines */}
            <div className="search__filter-group">
              <div
                className="search__filter-row search__filter-row--underline"
                onClick={() => setAirlineFilterExpanded(!airlineFilterExpanded)}
                role="button"
                tabIndex={0}>
                <h6 className="search__filter-large-title">{translations.FLIGHTS_FORM.AIRLINES}</h6>
                <svg
                  id="search-chevron-up-icon"
                  className={`search__filter-chevron-icon ${airlineFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
                  viewBox="0 0 10 6.063"
                  width={10}
                  height={6.063}>
                  <path
                    id="Path_62"
                    data-name="Path 62"
                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
                    transform="translate(-240 624)"
                    fill="#707070"
                  />
                </svg>
              </div>
              {airlineFilterExpanded && (
                <div className="search__filter-rows">
                  {airlineFilter.map((airline, airlineIndex) => (
                    <div className="search__filter-row search__filter-row--checkbox" key={`${airline.name}-${airlineIndex}`}>
                      <div className="checkbox">
                        <label className="checkbox__label">
                          <input
                            type="checkbox"
                            className="checkbox__input checkbox__input--parent"
                            checked={filters.airlines?.map((a) => a.id).includes(airline.id)}
                            onChange={(event) => changeCheckbox('Airlines', airline, event)}
                          />
                          <span className="radiobutton__label-text">{airline.name}</span>
                        </label>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
            {/* NumberOfStops */}
            <div className="search__filter-group">
              <div
                className="search__filter-row search__filter-row--underline"
                onClick={() => setStopFilterExpanded(!stopFilterExpanded)}
                role="button"
                tabIndex={0}>
                <h6 className="search__filter-large-title">{translations.FLIGHTS_FORM.NUMBER_OF_STOPS}</h6>
                <svg
                  id="search-chevron-up-icon"
                  className={`search__filter-chevron-icon ${stopFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
                  viewBox="0 0 10 6.063"
                  width={10}
                  height={6.063}>
                  <path
                    id="Path_62"
                    data-name="Path 62"
                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
                    transform="translate(-240 624)"
                    fill="#707070"
                  />
                </svg>
              </div>
              {stopFilterExpanded && (
                <div className="search__filter-rows">
                  {numberOfStopsFilter.map((numberOfStops, stopIndex) => (
                    <div className="search__filter-row search__filter-row--checkbox" key={`${numberOfStops.name}-${stopIndex}`}>
                      <div className="checkbox">
                        <label className="checkbox__label">
                          <input
                            type="checkbox"
                            className="checkbox__input checkbox__input--parent"
                            checked={filters.numberOfStops?.map((s) => s.id).includes(numberOfStops.id)}
                            onChange={(event) => changeCheckbox('NumberOfStops', numberOfStops, event)}
                          />
                          <span className="radiobutton__label-text">{Number(numberOfStops.name) > 0 ? `${numberOfStops.name} Stop(s)` : 'Direct'}</span>
                        </label>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
            {/* DepartureRange */}
            <div className="search__filter-group">
              <div
                className="search__filter-row search__filter-row--underline"
                onClick={() => setDepartureFilterExpanded(!departureFilterExpanded)}
                role="button"
                tabIndex={0}>
                <h6 className="search__filter-large-title">{translations.SRP.DEPARTURE_RANGE}</h6>
                <svg
                  id="search-chevron-up-icon"
                  className={`search__filter-chevron-icon ${departureFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
                  viewBox="0 0 10 6.063"
                  width={10}
                  height={6.063}>
                  <path
                    id="Path_62"
                    data-name="Path 62"
                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
                    transform="translate(-240 624)"
                    fill="#707070"
                  />
                </svg>
              </div>
              {departureFilterExpanded && (
                <div className="search__filter-rows">
                  {departureRangeFilter.map((departureRange, rangeIndex) => (
                    <div className="search__filter-row search__filter-row--checkbox" key={`${departureRange.name}-${rangeIndex}`}>
                      <div className="checkbox">
                        <label className="checkbox__label">
                          <input
                            type="checkbox"
                            className="checkbox__input checkbox__input--parent"
                            checked={filters.departureRanges?.map((s) => s.id).includes(departureRange.id)}
                            onChange={(event) => changeCheckbox('DepartureRange', departureRange, event)}
                          />
                          <span className="radiobutton__label-text">{departureRange.name}</span>
                        </label>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
            {/* DepartureAirport */}
            <div className="search__filter-group">
              <div
                className="search__filter-row search__filter-row--underline"
                onClick={() => setDepartureAirportFilterExpanded(!departureAirportFilterExpanded)}
                role="button"
                tabIndex={0}>
                <h6 className="search__filter-large-title">{translations.SRP.DEPARTURE_AIRPORTS}</h6>
                <svg
                  id="search-chevron-up-icon"
                  className={`search__filter-chevron-icon ${departureAirportFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
                  viewBox="0 0 10 6.063"
                  width={10}
                  height={6.063}>
                  <path
                    id="Path_62"
                    data-name="Path 62"
                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
                    transform="translate(-240 624)"
                    fill="#707070"
                  />
                </svg>
              </div>
              {departureAirportFilterExpanded && (
                <div className="search__filter-rows">
                  {departureAirportFilter.map((departureAirport, airportIndex) => (
                    <div className="search__filter-row search__filter-row--checkbox" key={`${departureAirport.name}-${airportIndex}`}>
                      <div className="checkbox">
                        <label className="checkbox__label">
                          <input
                            type="checkbox"
                            className="checkbox__input checkbox__input--parent"
                            checked={filters.departureAirports?.map((s) => s.id).includes(departureAirport.id)}
                            onChange={(event) => changeCheckbox('DepartureAirports', departureAirport, event)}
                          />
                          <span className="radiobutton__label-text">{departureAirport.name}</span>
                        </label>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
            {/* ArrivalAirport */}
            <div className="search__filter-group">
              <div
                className="search__filter-row search__filter-row--underline"
                onClick={() => setArrivalAirportFilterExpanded(!arrivalAirportFilterExpanded)}
                role="button"
                tabIndex={0}>
                <h6 className="search__filter-large-title">{translations.SRP.ARRIVAL_AIRPORTS}</h6>
                <svg
                  id="search-chevron-up-icon"
                  className={`search__filter-chevron-icon ${arrivalAirportFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
                  viewBox="0 0 10 6.063"
                  width={10}
                  height={6.063}>
                  <path
                    id="Path_62"
                    data-name="Path 62"
                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
                    transform="translate(-240 624)"
                    fill="#707070"
                  />
                </svg>
              </div>
              {arrivalAirportFilterExpanded && (
                <div className="search__filter-rows">
                  {arrivalAirportFilter.map((arrivalAirport, airportIndex) => (
                    <div className="search__filter-row search__filter-row--checkbox" key={`${arrivalAirport.name}-${airportIndex}`}>
                      <div className="checkbox">
                        <label className="checkbox__label">
                          <input
                            type="checkbox"
                            className="checkbox__input checkbox__input--parent"
                            checked={filters.arrivalAirports?.map((s) => s.id).includes(arrivalAirport.id)}
                            onChange={(event) => changeCheckbox('ArrivalAirports', arrivalAirport, event)}
                          />
                          <span className="radiobutton__label-text">{arrivalAirport.name}</span>
                        </label>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
            {/* Duration */}
            <div className="search__filter-group">
              <div
                className="search__filter-row search__filter-row--underline"
                onClick={() => setDurationFilterExpanded(!durationFilterExpanded)}
                role="button"
                tabIndex={0}>
                <h6 className="search__filter-large-title">{translations.FLIGHTS_FORM.TRAVEL_DURATION}</h6>
                <svg
                  id="search-chevron-up-icon"
                  className={`search__filter-chevron-icon ${durationFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
                  viewBox="0 0 10 6.063"
                  width={10}
                  height={6.063}>
                  <path
                    id="Path_62"
                    data-name="Path 62"
                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
                    transform="translate(-240 624)"
                    fill="#707070"
                  />
                </svg>
              </div>
              {durationFilterExpanded &&
                !isEmpty(travelTimeRangeValues) &&
                (() => {
                  return (
                    <div className="search__filter-rows">
                      <MultiRangeFilter
                        min={minTravelTime}
                        max={maxTravelTime}
                        selectedMin={first(travelTimeRangeValues) ?? minTravelTime}
                        selectedMax={last(travelTimeRangeValues) ?? maxTravelTime}
                        valueFormatter={(value) => `${minutesToHoursString(value)}`}
                        onChange={(newMin, newMax) => {
                          handleTravelTimeSliderChange([newMin, newMax]);
                        }}
                      />
                    </div>
                  );
                })()}
            </div>
            {/* Price */}
            <div className="search__filter-group">
              <div
                className="search__filter-row search__filter-row--underline"
                onClick={() => setPriceFilterExpanded(!priceFilterExpanded)}
                role="button"
                tabIndex={0}>
                <h6 className="search__filter-large-title">{translations.SRP.PRICE}</h6>
                <svg
                  id="search-chevron-up-icon"
                  className={`search__filter-chevron-icon ${priceFilterExpanded ? 'search__filter-chevron-icon--flipped' : ''} `}
                  viewBox="0 0 10 6.063"
                  width={10}
                  height={6.063}>
                  <path
                    id="Path_62"
                    data-name="Path 62"
                    d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
                    transform="translate(-240 624)"
                    fill="#707070"
                  />
                </svg>
              </div>
              {priceFilterExpanded &&
                !isEmpty(priceRangeValues) &&
                (() => {
                  return (
                    <div className="search__filter-rows">
                      <MultiRangeFilter
                        min={minPrice}
                        max={maxPrice}
                        selectedMin={first(priceRangeValues) ?? minPrice}
                        selectedMax={last(priceRangeValues) ?? maxPrice}
                        valueFormatter={(value) => `€${value}`}
                        onChange={(newMin, newMax) => {
                          handlePriceSliderChange([newMin, newMax]);
                        }}
                      />
                    </div>
                  );
                })()}
            </div>
          </div>
        </>
      </div>
    </div>
  );
};

export default FlightFilters;