related-ui-components 1.3.0 → 1.3.2

package/src/components/Filters/Filters.tsx

@@ -1,488 +1,479 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  TextStyle,
-  ViewStyle,
-  ImageRequireSource,
-  I18nManager,
-  TouchableWithoutFeedback,
-} from "react-native";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
-import PointsRangeSelector from "./PointsRangeSelector";
-import { BrandIcon } from "../BrandIcon";
-import { Ionicons } from "@expo/vector-icons";
-import Checkbox from "expo-checkbox";
-import { useTheme, ThemeType } from "../../theme"; // Import ThemeType
+  import React, { useCallback, useEffect, useRef, useState } from "react";
+  import {
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+    TextStyle,
+    ViewStyle,
+    ImageSourcePropType,
+    I18nManager,
+    TouchableWithoutFeedback,
+  } from "react-native";
+  import { GestureHandlerRootView } from "react-native-gesture-handler";
+  import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
+  import PointsRangeSelector from "./PointsRangeSelector";
+  import { BrandIcon } from "../BrandIcon";
+  import { Ionicons } from "@expo/vector-icons";
+  import Checkbox from "expo-checkbox";
+  import { useTheme, ThemeType } from "../../theme"; // Import ThemeType
 
-type SortOption = {
-  name: string;
-  value: string;
-  id: number;
-};
-type Brand = {
-  id: string;
-  name: string;
-  logo: ImageRequireSource;
-};
-export type FilterResult = {
-  sort: SortOption[];
-  pointsRange: { min: number; max: number };
-  selectedBrands: Brand[];
-};
-interface FiltersProps {
-  isRTL?: boolean;
-  sortOptions?: SortOption[];
-  sortSectionTitle?: string;
-  sectionTitleStyle?: TextStyle;
-  sortSectionStyle?: ViewStyle;
-  rangeMinLimit?: number;
-  rangeMaxLimit?: number;
-  rangeInitialMin?: number;
-  rangeInitialMax?: number;
-  showPointsRange?: boolean;
-  pointsRangeSectionTitle?: string;
-  pointsRangeContainerStyle?: ViewStyle;
-  pointsRangeInputsContainerStyle?: ViewStyle;
-  pointsRangeCustomInputContainerStyle?: ViewStyle;
-  pointsRangeCustomInputFieldStyle?: ViewStyle;
-  pointsRangeSliderContainerStyle?: ViewStyle;
-  pointsRangeMultiSliderContainerStyle?: ViewStyle;
-  pointsRangeTrackStyle?: ViewStyle;
-  pointsRangeSelectedTrackStyle?: ViewStyle;
-  pointsRangeUnselectedTrackStyle?: ViewStyle;
-  pointsRangeMarkerStyle?: ViewStyle;
-  pointsRangeMarkerEnabledStyle?: ViewStyle;
-  pointsRangeMarkerDisabledStyle?: ViewStyle;
-  pointsRangeMarkerDotStyle?: ViewStyle;
-  pointsRangeInputProps?: any;
-  pointsRangeMultiSliderProps?: any;
-  brands?: Brand[];
-  brandContainerStyle?: ViewStyle;
-  brandActiveIcon?: React.ReactNode;
-  brandActiveIconStyle?: ViewStyle;
-  brandSectionTile?: string;
-  onActionButtonPress?: (result: FilterResult) => void;
-  containerStyle?: ViewStyle;
-  headerStyle?: ViewStyle;
-  titleStyle?: TextStyle;
-  resetTextStyle?: TextStyle;
-  sectionStyle?: ViewStyle;
-  optionRowStyle?: ViewStyle;
-  optionTextStyle?: TextStyle;
-  checkboxColor?: string;
-  applyButtonStyle?: ViewStyle;
-  applyButtonTextStyle?: TextStyle;
-  bottomSheetStyle?: ViewStyle;
-  headerTitleText?: string;
-  headerResetText?: string;
-  bottomSheetIndex?: number;
-  snapPoints?: string[];
-  handleIndicatorStyle?: ViewStyle;
-  applyButtonText?: string;
-  overlayColor?: string;
-  onClose?: () => void;
-  visible?: boolean;
-}
+  type SortOption = {
+    name: string;
+    value: string;
+    id: number;
+    checked?: boolean;
+  };
+  type Brand = {
+    id: string;
+    name: string;
+    logo: ImageSourcePropType;
+    checked?: boolean;
+  };
+  export type FilterResult = {
+    sort: SortOption | undefined;
+    pointsRange: { min: number; max: number };
+    selectedBrands: Brand[];
+  };
+  interface FiltersProps {
+    isRTL?: boolean;
+    sortOptions?: SortOption[];
+    sortSectionTitle?: string;
+    sectionTitleStyle?: TextStyle;
+    sortSectionStyle?: ViewStyle;
+    rangeMinLimit?: number;
+    rangeMaxLimit?: number;
+    rangeInitialMin?: number;
+    rangeInitialMax?: number;
+    showPointsRange?: boolean;
+    pointsRangeSectionTitle?: string;
+    pointsRangeContainerStyle?: ViewStyle;
+    pointsRangeInputsContainerStyle?: ViewStyle;
+    pointsRangeCustomInputContainerStyle?: ViewStyle;
+    pointsRangeCustomInputFieldStyle?: ViewStyle;
+    pointsRangeSliderContainerStyle?: ViewStyle;
+    pointsRangeMultiSliderContainerStyle?: ViewStyle;
+    pointsRangeTrackStyle?: ViewStyle;
+    pointsRangeSelectedTrackStyle?: ViewStyle;
+    pointsRangeUnselectedTrackStyle?: ViewStyle;
+    pointsRangeMarkerStyle?: ViewStyle;
+    pointsRangeMarkerEnabledStyle?: ViewStyle;
+    pointsRangeMarkerDisabledStyle?: ViewStyle;
+    pointsRangeMarkerDotStyle?: ViewStyle;
+    pointsRangeInputProps?: any;
+    pointsRangeMultiSliderProps?: any;
+    brands?: Brand[];
+    brandContainerStyle?: ViewStyle;
+    brandActiveIcon?: React.ReactNode;
+    brandActiveIconStyle?: ViewStyle;
+    brandSectionTile?: string;
+    onActionButtonPress?: (result: FilterResult) => void;
+    containerStyle?: ViewStyle;
+    headerStyle?: ViewStyle;
+    titleStyle?: TextStyle;
+    resetTextStyle?: TextStyle;
+    sectionStyle?: ViewStyle;
+    optionRowStyle?: ViewStyle;
+    optionTextStyle?: TextStyle;
+    checkboxColor?: string;
+    applyButtonStyle?: ViewStyle;
+    applyButtonTextStyle?: TextStyle;
+    bottomSheetStyle?: ViewStyle;
+    headerTitleText?: string;
+    headerResetText?: string;
+    bottomSheetIndex?: number;
+    snapPoints?: string[];
+    handleIndicatorStyle?: ViewStyle;
+    applyButtonText?: string;
+    overlayColor?: string;
+    onClose?: () => void;
+    visible?: boolean;
+  }
 
-const Filters: React.FC<FiltersProps> = ({
-  isRTL = I18nManager.isRTL,
-  sortOptions = [],
-  sortSectionTitle = "Sort",
-  sectionTitleStyle,
-  sortSectionStyle,
-  onActionButtonPress,
-  rangeInitialMax = 1000,
-  rangeInitialMin = 0,
-  rangeMaxLimit = 1000,
-  rangeMinLimit = 0,
-  pointsRangeContainerStyle,
-  pointsRangeInputsContainerStyle,
-  pointsRangeCustomInputContainerStyle,
-  pointsRangeCustomInputFieldStyle,
-  pointsRangeSliderContainerStyle,
-  pointsRangeMultiSliderContainerStyle,
-  pointsRangeTrackStyle,
-  pointsRangeSelectedTrackStyle,
-  pointsRangeUnselectedTrackStyle,
-  pointsRangeMarkerStyle,
-  pointsRangeMarkerEnabledStyle,
-  pointsRangeMarkerDisabledStyle,
-  pointsRangeMarkerDotStyle,
-  pointsRangeInputProps,
-  pointsRangeMultiSliderProps,
-  containerStyle,
-  headerStyle,
-  titleStyle,
-  resetTextStyle,
-  sectionStyle,
-  optionRowStyle,
-  optionTextStyle,
-  checkboxColor: checkboxColorProp,
-  applyButtonStyle,
-  applyButtonTextStyle,
-  bottomSheetStyle,
-  bottomSheetIndex = 0,
-  snapPoints = ["50%", "90%"],
-  handleIndicatorStyle,
-  brands = [],
-  brandContainerStyle,
-  brandActiveIcon,
-  showPointsRange = true,
-  pointsRangeSectionTitle = "Points range",
-  brandActiveIconStyle,
-  brandSectionTile = "Brands",
-  applyButtonText = "Apply Filter",
-  headerResetText = "Reset All",
-  headerTitleText = "Filter",
-  overlayColor = "rgba(0, 0, 0, 0.5)",
-  onClose,
-  visible = true,
-}) => {
-  const {theme, isRTL : rtl} = useTheme();
-  isRTL = rtl || isRTL;
-  const bottomSheetRef = useRef<BottomSheet>(null);
-  const styles = createStyles(theme, isRTL);
-  const checkboxColor = checkboxColorProp ?? theme.primary;
-  const [isVisible, setIsVisible] = useState(visible);
+  const Filters: React.FC<FiltersProps> = ({
+    isRTL = I18nManager.isRTL,
+    sortOptions = [],
+    sortSectionTitle = "Sort",
+    sectionTitleStyle,
+    sortSectionStyle,
+    onActionButtonPress,
+    rangeInitialMax = 1000,
+    rangeInitialMin = 0,
+    rangeMaxLimit = 1000,
+    rangeMinLimit = 0,
+    pointsRangeContainerStyle,
+    pointsRangeInputsContainerStyle,
+    pointsRangeCustomInputContainerStyle,
+    pointsRangeCustomInputFieldStyle,
+    pointsRangeSliderContainerStyle,
+    pointsRangeMultiSliderContainerStyle,
+    pointsRangeTrackStyle,
+    pointsRangeSelectedTrackStyle,
+    pointsRangeUnselectedTrackStyle,
+    pointsRangeMarkerStyle,
+    pointsRangeMarkerEnabledStyle,
+    pointsRangeMarkerDisabledStyle,
+    pointsRangeMarkerDotStyle,
+    pointsRangeInputProps,
+    pointsRangeMultiSliderProps,
+    containerStyle,
+    headerStyle,
+    titleStyle,
+    resetTextStyle,
+    sectionStyle,
+    optionRowStyle,
+    optionTextStyle,
+    checkboxColor: checkboxColorProp,
+    applyButtonStyle,
+    applyButtonTextStyle,
+    bottomSheetStyle,
+    bottomSheetIndex = 0,
+    snapPoints = ["50%", "90%"],
+    handleIndicatorStyle,
+    brands = [],
+    brandContainerStyle,
+    brandActiveIcon,
+    showPointsRange = true,
+    pointsRangeSectionTitle = "Points range",
+    brandActiveIconStyle,
+    brandSectionTile = "Brands",
+    applyButtonText = "Apply Filter",
+    headerResetText = "Reset All",
+    headerTitleText = "Filter",
+    overlayColor = "rgba(0, 0, 0, 0.5)",
+    onClose,
+    visible = true,
+  }) => {
+    const {theme, isRTL : rtl} = useTheme();
+    isRTL = rtl || isRTL;
+    const bottomSheetRef = useRef<BottomSheet>(null);
+    const styles = createStyles(theme, isRTL);
+    const checkboxColor = checkboxColorProp ?? theme.primary;
+    const [isVisible, setIsVisible] = useState(visible);
 
-  // Sync the internal isVisible state with the visible prop
-  useEffect(() => {
-    setIsVisible(visible);
-    if (visible && bottomSheetRef.current) {
-      bottomSheetRef.current.snapToIndex(0);
-    }
-  }, [visible]);
+    // Sync the internal isVisible state with the visible prop
+    useEffect(() => {
+      setIsVisible(visible);
+      if (visible && bottomSheetRef.current) {
+        bottomSheetRef.current.snapToIndex(0);
+      }
+    }, [visible]);
 
-  const handleSheetChanges = useCallback((index: number) => {
-    console.log("handleSheetChanges", index);
-    // If the sheet is closed (index -1), handle visibility
-    if (index === -1) {
-      setIsVisible(false);
-    }
-  }, []);
+    const handleSheetChanges = useCallback((index: number) => {
+      if (index === -1) {
+        setIsVisible(false);
+      }
+    }, []);
 
-  const [resetCounter, setResetCounter] = useState(0);
+    const [resetCounter, setResetCounter] = useState(0);
 
-  const [checkedItems, setCheckedItems] = useState<Record<string, boolean>>(
-    sortOptions.reduce((acc, option) => {
-      acc[option.id] = false;
-      return acc;
-    }, {} as Record<string, boolean>)
-  );
-  const [selectedBrands, setSelectedBrands] = useState<Record<string, boolean>>(
-    brands.reduce((acc, option) => {
-      acc[option.id] = false;
-      return acc;
-    }, {} as Record<string, boolean>)
-  );
-  const [pointsRange, setPointsRange] = useState<{ min: number; max: number }>({
-    min: rangeInitialMin,
-    max: rangeInitialMax,
-  });
 
-  const handleCheckboxChange = (id: string) => {
-    setCheckedItems((prevState) => ({
-      ...prevState,
-      [id]: !prevState[id],
-    }));
-  };
+    const [checkedItem, setCheckedItem] = useState<number | null>(
+      sortOptions.find(option => option.checked)?.id || null
+    );
 
-  const handleBrandSelect = (id: string) => {
-    setSelectedBrands((prevState) => ({
-      ...prevState,
-      [id]: !prevState[id],
-    }));
-  };
+    const [selectedBrands, setSelectedBrands] = useState<Record<string, boolean>>(
+      brands.reduce((acc, option) => {
+        acc[option.id] = option.checked || false;
+        return acc;
+      }, {} as Record<string, boolean>)
+    );
+    const [pointsRange, setPointsRange] = useState<{ min: number; max: number }>({
+      min: rangeInitialMin,
+      max: rangeInitialMax,
+    });
 
-  const handleApplyFilter = () => {
-    if (onActionButtonPress) {
-      const selectedSortOptions = sortOptions.filter(
-        (option) => checkedItems[option.id]
-      );
+    const handleCheckboxChange = (id: number) => {
+      setCheckedItem(id);
+    };
 
-      const selectedBrandsList = brands.filter(
-        (brand) => selectedBrands[brand.id]
-      );
+    const handleBrandSelect = (id: string) => {
+      setSelectedBrands((prevState) => ({
+        ...prevState,
+        [id]: !prevState[id],
+      }));
+    };
 
-      const filterResult: FilterResult = {
-        sort: selectedSortOptions,
-        pointsRange: pointsRange,
-        selectedBrands: selectedBrandsList,
-      };
+    const handleApplyFilter = () => {
+      if (onActionButtonPress) {
+        const selectedSortOption = sortOptions.find(
+          (option) => option.id == checkedItem
+        );
 
-      onActionButtonPress(filterResult);
-      closeBottomSheet(); // Close the filter after applying
-    }
-  };
+        const selectedBrandsList = brands.filter(
+          (brand) => selectedBrands[brand.id]
+        );
 
-  const handleResetAll = () => {
-    const resetState = sortOptions.reduce((acc, option) => {
-      acc[option.id] = false;
-      return acc;
-    }, {} as Record<string, boolean>);
+        const filterResult: FilterResult = {
+          sort: selectedSortOption,
+          pointsRange: pointsRange,
+          selectedBrands: selectedBrandsList,
+        };
 
-    const resetBrands = brands.reduce((acc, option) => {
-      acc[option.id] = false;
-      return acc;
-    }, {} as Record<string, boolean>);
+        onActionButtonPress(filterResult);
+        closeBottomSheet(); // Close the filter after applying
+      }
+    };
 
-    setCheckedItems(resetState);
-    setSelectedBrands(resetBrands);
-    setPointsRange({ min: rangeInitialMin, max: rangeInitialMax });
-    setResetCounter((prev) => prev + 1);
-  };
-
-  const closeBottomSheet = useCallback(() => {
-    if (bottomSheetRef.current) {
-      bottomSheetRef.current.close();
-    }
-    setIsVisible(false);
-    if (onClose) {
-      onClose();
-    }
-  }, [onClose]);
+    const handleResetAll = () => {
+      const resetBrands = brands.reduce((acc, option) => {
+        acc[option.id] = false;
+        return acc;
+      }, {} as Record<string, boolean>);
 
-  // If not visible, don't render anything
-  if (!isVisible) {
-    return null;
-  }
+      setCheckedItem(null);
+      setSelectedBrands(resetBrands);
+      setPointsRange({ min: rangeInitialMin, max: rangeInitialMax });
+      setResetCounter((prev) => prev + 1);
+    };
 
-  return (
-    <GestureHandlerRootView style={styles.overlayContainer}>
-      {/* Semi-transparent overlay */}
-      <TouchableWithoutFeedback onPress={closeBottomSheet}>
-        <View style={[styles.overlay, { backgroundColor: overlayColor }]} />
-      </TouchableWithoutFeedback>
-      
-      <BottomSheet
-        ref={bottomSheetRef}
-        index={bottomSheetIndex}
-        handleComponent={() => null}
-        onChange={handleSheetChanges}
-        style={bottomSheetStyle}
-        backgroundStyle={{ backgroundColor: theme.surface }}
-        handleIndicatorStyle={[styles.handleIndicator, handleIndicatorStyle]}
-        // snapPoints={snapPoints}
-        enablePanDownToClose={true}
-        // onClose={() => {
-        //   setIsVisible(false);
-        //   if (onClose) onClose();
-        // }}
-      >
-        <View style={[styles.container, containerStyle]}>
-          <View style={[styles.header, headerStyle]}>
-            <Text style={[styles.title, titleStyle]}>{headerTitleText}</Text>
-            <TouchableOpacity onPress={handleResetAll}>
-              <Text style={[styles.resetText, resetTextStyle]}>
-                {headerResetText}
-              </Text>
-            </TouchableOpacity>
-          </View>
-          <BottomSheetView style={{ paddingBottom: 75 }}>
-            {sortOptions && sortOptions.length > 0 && (
-              <View style={[styles.section, sectionStyle, sortSectionStyle]}>
-                <Text style={[styles.sectionTitle, sectionTitleStyle]}>
-                  {sortSectionTitle}
-                </Text>
-                {sortOptions.map((option) => (
-                  <View
-                    style={[styles.optionRow, optionRowStyle]}
-                    key={option.id}
-                  >
-                    <Checkbox
-                      value={checkedItems[option.id]}
-                      color={checkboxColor}
-                      hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
-                      onValueChange={() =>
-                        handleCheckboxChange(option.id.toString())
-                      }
-                    />
-                    <Text style={[styles.optionText, optionTextStyle]}>
-                      {option.name}
-                    </Text>
-                  </View>
-                ))}
-              </View>
-            )}
+    const closeBottomSheet = useCallback(() => {
+      if (bottomSheetRef.current) {
+        bottomSheetRef.current.close();
+      }
+      setIsVisible(false);
+      if (onClose) {
+        onClose();
+      }
+    }, [onClose]);
 
-            {showPointsRange && (
-              <View style={[styles.section, sectionStyle]}>
-                <Text style={[styles.sectionTitle, sectionTitleStyle]}>
-                  {pointsRangeSectionTitle}
-                </Text>
-                <PointsRangeSelector
-                  resetKey={resetCounter}
-                  initialMax={rangeInitialMax}
-                  initialMin={rangeInitialMin}
-                  minLimit={rangeMinLimit}
-                  maxLimit={rangeMaxLimit}
-                  isRTL={isRTL}
-                  containerStyle={pointsRangeContainerStyle}
-                  inputsContainerStyle={pointsRangeInputsContainerStyle}
-                  customInputContainerStyle={
-                    pointsRangeCustomInputContainerStyle
-                  }
-                  customInputFieldStyle={pointsRangeCustomInputFieldStyle}
-                  sliderContainerStyle={pointsRangeSliderContainerStyle}
-                  multiSliderContainerStyle={
-                    pointsRangeMultiSliderContainerStyle
-                  }
-                  trackStyle={pointsRangeTrackStyle}
-                  selectedTrackStyle={pointsRangeSelectedTrackStyle}
-                  unselectedTrackStyle={pointsRangeUnselectedTrackStyle}
-                  markerStyle={pointsRangeMarkerStyle}
-                  markerEnabledStyle={pointsRangeMarkerEnabledStyle}
-                  markerDisabledStyle={pointsRangeMarkerDisabledStyle}
-                  markerDotStyle={pointsRangeMarkerDotStyle}
-                  inputProps={pointsRangeInputProps}
-                  multiSliderProps={pointsRangeMultiSliderProps}
-                  onChange={(min: number, max: number) => {
-                    setPointsRange({ min, max });
-                  }}
-                />
-              </View>
-            )}
+    // If not visible, don't render anything
+    if (!isVisible) {
+      return null;
+    }
 
-            {brands && brands.length > 0 && (
-              <View style={[styles.section, sectionStyle]}>
-                <Text style={[styles.sectionTitle, sectionTitleStyle]}>
-                  {brandSectionTile}
+    return (
+      <GestureHandlerRootView style={styles.overlayContainer}>
+        {/* Semi-transparent overlay */}
+        <TouchableWithoutFeedback onPress={closeBottomSheet}>
+          <View style={[styles.overlay, { backgroundColor: overlayColor }]} />
+        </TouchableWithoutFeedback>
+        
+        <BottomSheet
+          ref={bottomSheetRef}
+          index={bottomSheetIndex}
+          handleComponent={() => null}
+          onChange={handleSheetChanges}
+          style={bottomSheetStyle}
+          backgroundStyle={{ backgroundColor: theme.surface }}
+          handleIndicatorStyle={[styles.handleIndicator, handleIndicatorStyle]}
+          // snapPoints={snapPoints}
+          enablePanDownToClose={true}
+          onClose={() => {
+            setIsVisible(false);
+            if (onClose) onClose();
+          }}
+        >
+          <View style={[styles.container, containerStyle]}>
+            <View style={[styles.header, headerStyle]}>
+              <Text style={[styles.title, titleStyle]}>{headerTitleText}</Text>
+              <TouchableOpacity onPress={handleResetAll}>
+                <Text style={[styles.resetText, resetTextStyle]}>
+                  {headerResetText}
                 </Text>
-                <View style={[styles.brandsGrid, brandContainerStyle]}>
-                  {brands.map((brand) => (
-                    <BrandIcon
-                      key={brand.id}
-                      size={50}
-                      selected={selectedBrands[brand.id]}
-                      onPress={() => handleBrandSelect(brand.id.toString())}
-                      brand={{
-                        id: brand.id,
-                        name: brand.name,
-                        logo: brand.logo,
-                      }}
-                      selectionIndicatorIcon={
-                        brandActiveIcon || (
-                          <Ionicons
-                            name="checkmark-outline"
-                            color={theme.onPrimary}
-                          />
-                        )
-                      }
-                      selectionIndicatorStyle={brandActiveIconStyle}
-                    />
+              </TouchableOpacity>
+            </View>
+            <BottomSheetView style={{ paddingBottom: 75 }}>
+              {sortOptions && sortOptions.length > 0 && (
+                <View style={[styles.section, sectionStyle, sortSectionStyle]}>
+                  <Text style={[styles.sectionTitle, sectionTitleStyle]}>
+                    {sortSectionTitle}
+                  </Text>
+                  {sortOptions.map((option) => (
+                    <View
+                      style={[styles.optionRow, optionRowStyle]}
+                      key={option.id}
+                    >
+                      <Checkbox
+                        value={option.id == checkedItem}
+                        color={checkboxColor}
+                        hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+                        onValueChange={() =>
+                          handleCheckboxChange(option.id)
+                        }
+                      />
+                      <Text style={[styles.optionText, optionTextStyle]}>
+                        {option.name}
+                      </Text>
+                    </View>
                   ))}
                 </View>
-              </View>
-            )}
+              )}
 
-            <TouchableOpacity
-              style={[styles.applyButton, applyButtonStyle]}
-              onPress={handleApplyFilter}
-            >
-              <Text style={[styles.applyButtonText, applyButtonTextStyle]}>
-                {applyButtonText}
-              </Text>
-            </TouchableOpacity>
-          </BottomSheetView>
-        </View>
-      </BottomSheet>
-    </GestureHandlerRootView>
-  );
-};
+              {showPointsRange && (
+                <View style={[styles.section, sectionStyle]}>
+                  <Text style={[styles.sectionTitle, sectionTitleStyle]}>
+                    {pointsRangeSectionTitle}
+                  </Text>
+                  <PointsRangeSelector
+                    resetKey={resetCounter}
+                    initialMax={rangeInitialMax}
+                    initialMin={rangeInitialMin}
+                    minLimit={rangeMinLimit}
+                    maxLimit={rangeMaxLimit}
+                    isRTL={isRTL}
+                    containerStyle={pointsRangeContainerStyle}
+                    inputsContainerStyle={pointsRangeInputsContainerStyle}
+                    customInputContainerStyle={
+                      pointsRangeCustomInputContainerStyle
+                    }
+                    customInputFieldStyle={pointsRangeCustomInputFieldStyle}
+                    sliderContainerStyle={pointsRangeSliderContainerStyle}
+                    multiSliderContainerStyle={
+                      pointsRangeMultiSliderContainerStyle
+                    }
+                    trackStyle={pointsRangeTrackStyle}
+                    selectedTrackStyle={pointsRangeSelectedTrackStyle}
+                    unselectedTrackStyle={pointsRangeUnselectedTrackStyle}
+                    markerStyle={pointsRangeMarkerStyle}
+                    markerEnabledStyle={pointsRangeMarkerEnabledStyle}
+                    markerDisabledStyle={pointsRangeMarkerDisabledStyle}
+                    markerDotStyle={pointsRangeMarkerDotStyle}
+                    inputProps={pointsRangeInputProps}
+                    multiSliderProps={pointsRangeMultiSliderProps}
+                    onChange={(min: number, max: number) => {
+                      setPointsRange({ min, max });
+                    }}
+                  />
+                </View>
+              )}
+
+              {brands && brands.length > 0 && (
+                <View style={[styles.section, sectionStyle]}>
+                  <Text style={[styles.sectionTitle, sectionTitleStyle]}>
+                    {brandSectionTile}
+                  </Text>
+                  <View style={[styles.brandsGrid, brandContainerStyle]}>
+                    {brands.map((brand) => (
+                      <BrandIcon
+                        key={brand.id}
+                        size={50}
+                        selected={selectedBrands[brand.id]}
+                        onPress={() => handleBrandSelect(brand.id.toString())}
+                        brand={{
+                          id: brand.id,
+                          name: brand.name,
+                          logo: brand.logo,
+                        }}
+                        selectionIndicatorIcon={
+                          brandActiveIcon || (
+                            <Ionicons
+                              name="checkmark-outline"
+                              color={theme.onPrimary}
+                            />
+                          )
+                        }
+                        selectionIndicatorStyle={brandActiveIconStyle}
+                      />
+                    ))}
+                  </View>
+                </View>
+              )}
+
+              <TouchableOpacity
+                style={[styles.applyButton, applyButtonStyle]}
+                onPress={handleApplyFilter}
+              >
+                <Text style={[styles.applyButtonText, applyButtonTextStyle]}>
+                  {applyButtonText}
+                </Text>
+              </TouchableOpacity>
+            </BottomSheetView>
+          </View>
+        </BottomSheet>
+      </GestureHandlerRootView>
+    );
+  };
 
-const createStyles = (theme: ThemeType, isRTL: boolean) =>
-  StyleSheet.create({
-    overlayContainer: {
-      flex: 1,
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      zIndex: 1000,
-    },
-    overlay: {
-      ...StyleSheet.absoluteFillObject,
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    },
-    container: {
-      flex: 1,
-      paddingHorizontal: 25,
-      backgroundColor: theme.surface,
-    },
-    handleIndicator: {
-      width: 40,
-      height: 4,
-      backgroundColor: theme.border,
-      alignSelf: "center",
-      marginTop: 8,
-      borderRadius: 2,
-    },
-    header: {
-      flexDirection: isRTL ? "row-reverse" : "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      paddingVertical: 15,
-      borderBottomWidth: 1,
-      borderBottomColor: theme.border,
-    },
-    title: {
-      fontSize: 18,
-      fontWeight: "bold",
-      color: theme.text,
-      textAlign: isRTL ? "right" : "left",
-    },
-    resetText: {
-      fontSize: 14,
-      color: theme.primary,
-      fontWeight: "500",
-      textAlign: isRTL ? "left" : "right",
-    },
-    section: {
-      marginTop: 20,
-    },
-    sectionTitle: {
-      fontSize: 16,
-      fontWeight: "500",
-      color: theme.helper,
-      marginBottom: 15,
-      textAlign: isRTL ? "right" : "left",
-    },
-    optionRow: {
-      flexDirection: isRTL ? "row-reverse" : "row",
-      alignItems: "center",
-      marginBottom: 15,
-      gap: 5,
-    },
-    optionText: {
-      fontSize: 15,
-      color: theme.text,
-      textAlign: isRTL ? "right" : "left",
-      marginLeft: isRTL ? 0 : 8,
-      marginRight: isRTL ? 8 : 0,
-    },
-    brandsGrid: {
-      flexDirection: "row",
-      flexWrap: "wrap",
-      gap: 10,
-      justifyContent: isRTL ? "flex-end" : "flex-start",
-    },
-    applyButton: {
-      backgroundColor: theme.primary,
-      borderRadius: 30,
-      paddingVertical: 15,
-      alignItems: "center",
-      marginTop: 30,
-    },
-    applyButtonText: {
-      color: theme.onPrimary,
-      fontSize: 16,
-      fontWeight: "bold",
-    },
-  });
+  const createStyles = (theme: ThemeType, isRTL: boolean) =>
+    StyleSheet.create({
+      overlayContainer: {
+        flex: 1,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 1000,
+      },
+      overlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      },
+      container: {
+        flex: 1,
+        paddingHorizontal: 25,
+        backgroundColor: theme.surface,
+      },
+      handleIndicator: {
+        width: 40,
+        height: 4,
+        backgroundColor: theme.border,
+        alignSelf: "center",
+        marginTop: 8,
+        borderRadius: 2,
+      },
+      header: {
+        flexDirection: isRTL ? "row-reverse" : "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingVertical: 15,
+        borderBottomWidth: 1,
+        borderBottomColor: theme.border,
+      },
+      title: {
+        fontSize: 18,
+        fontWeight: "bold",
+        color: theme.text,
+        textAlign: isRTL ? "right" : "left",
+      },
+      resetText: {
+        fontSize: 14,
+        color: theme.primary,
+        fontWeight: "500",
+        textAlign: isRTL ? "left" : "right",
+      },
+      section: {
+        marginTop: 20,
+      },
+      sectionTitle: {
+        fontSize: 16,
+        fontWeight: "500",
+        color: theme.helper,
+        marginBottom: 15,
+        textAlign: isRTL ? "right" : "left",
+      },
+      optionRow: {
+        flexDirection: isRTL ? "row-reverse" : "row",
+        alignItems: "center",
+        marginBottom: 15,
+        gap: 5,
+      },
+      optionText: {
+        fontSize: 15,
+        color: theme.text,
+        textAlign: isRTL ? "right" : "left",
+        marginLeft: isRTL ? 0 : 8,
+        marginRight: isRTL ? 8 : 0,
+      },
+      brandsGrid: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: 10,
+        justifyContent: isRTL ? "flex-end" : "flex-start",
+      },
+      applyButton: {
+        backgroundColor: theme.primary,
+        borderRadius: 30,
+        paddingVertical: 15,
+        alignItems: "center",
+        marginTop: 30,
+      },
+      applyButtonText: {
+        color: theme.onPrimary,
+        fontSize: 16,
+        fontWeight: "bold",
+      },
+    });
 
-export default Filters;
+  export default Filters;