import React, { useCallback, useState } from 'react'; import { View, Text, Pressable, ScrollView, type ViewStyle } from 'react-native'; import { useTranslation } from 'react-i18next'; import BottomSheet from '@/components/ui/BottomSheet'; import CustomRadio from '@/components/ui/CustomRadioDot'; import SizeSelector from '@/components/product/SizeSelector'; import Button from '@/components/ui/Button'; import Input from '@/components/ui/Input'; import { useFiltersStore } from '@/stores/filtersStore'; // --------------------------------------------------------------------------- // Constants // --------------------------------------------------------------------------- const SORT_OPTIONS = [ { key: 'recommended', labelKey: 'filter.recommended' as const, fallback: 'Recommended' }, { key: 'popular', labelKey: 'filter.most_popular' as const, fallback: 'Most Popular' }, { key: 'price_low', labelKey: 'filter.price_low_high' as const, fallback: 'Price Low \u2192 High' }, { key: 'price_high', labelKey: 'filter.price_high_low' as const, fallback: 'Price High \u2192 Low' }, { key: 'new', labelKey: 'filter.new_arrivals' as const, fallback: 'New Arrivals' }, ]; const SIZE_OPTIONS = ['XS', 'S', 'M', 'L', 'XL', 'XXL']; const COLOR_OPTIONS: { name: string; hex: string }[] = [ { name: 'white', hex: '#FFFFFF' }, { name: 'black', hex: '#000000' }, { name: 'red', hex: '#EF4444' }, { name: 'blue', hex: '#3B82F6' }, { name: 'pink', hex: '#EC4899' }, { name: 'green', hex: '#22C55E' }, { name: 'beige', hex: '#D4B896' }, { name: 'brown', hex: '#92400E' }, ]; // --------------------------------------------------------------------------- // Props // --------------------------------------------------------------------------- interface FilterSheetProps { visible: boolean; onClose: () => void; } // --------------------------------------------------------------------------- // Component // --------------------------------------------------------------------------- export default function FilterSheet({ visible, onClose }: FilterSheetProps) { const { t } = useTranslation(); // ---- Store ---- const sortBy = useFiltersStore((s) => s.sortBy); const setSortBy = useFiltersStore((s) => s.setSortBy); const sizes = useFiltersStore((s) => s.sizes); const toggleSize = useFiltersStore((s) => s.toggleSize); const priceRange = useFiltersStore((s) => s.priceRange); const setPriceRange = useFiltersStore((s) => s.setPriceRange); const colors = useFiltersStore((s) => s.colors); const toggleColor = useFiltersStore((s) => s.toggleColor); const resetFilters = useFiltersStore((s) => s.resetFilters); // ---- Local price inputs (string) ---- const [minPrice, setMinPrice] = useState( priceRange[0] > 0 ? String(priceRange[0]) : '', ); const [maxPrice, setMaxPrice] = useState( priceRange[1] < 10000 ? String(priceRange[1]) : '', ); // ---- Handlers ---- const handleApply = useCallback(() => { const min = minPrice ? Number(minPrice) : 0; const max = maxPrice ? Number(maxPrice) : 10000; setPriceRange([min, max]); onClose(); }, [minPrice, maxPrice, setPriceRange, onClose]); const handleReset = useCallback(() => { resetFilters(); setMinPrice(''); setMaxPrice(''); }, [resetFilters]); // ---- Size handler for SizeSelector (single-select API adapted to multi) ---- const handleSizePress = useCallback( (size: string) => { toggleSize(size); }, [toggleSize], ); return ( {/* ================================================================ */} {/* Sort By */} {/* ================================================================ */} {t('filter.sort_by_heading', 'Sort By')} {SORT_OPTIONS.map((option) => { const isSelected = sortBy === option.key; return ( setSortBy(option.key)} accessibilityRole="radio" accessibilityState={{ selected: isSelected }} accessibilityLabel={t(option.labelKey, option.fallback)} className="flex-row items-center py-1" style={({ pressed }: { pressed: boolean }): ViewStyle => ({ opacity: pressed ? 0.7 : 1, })} > setSortBy(option.key)} /> {t(option.labelKey, option.fallback)} ); })} {/* ================================================================ */} {/* Size */} {/* ================================================================ */} {t('filter.size_heading', 'Size')} {SIZE_OPTIONS.map((size) => { const isSelected = sizes.includes(size); return ( handleSizePress(size)} accessibilityRole="button" accessibilityState={{ selected: isSelected }} accessibilityLabel={`${t('product.size', 'Size')} ${size}`} className={`min-w-[44px] items-center justify-center px-4 py-2 rounded-lg ${ isSelected ? 'bg-primary' : 'bg-[#F5F5F5] border border-[#D1D1D1]' }`} > {size} ); })} {/* ================================================================ */} {/* Price Range */} {/* ================================================================ */} {t('filter.price_range', 'Price Range')} {/* ================================================================ */} {/* Color */} {/* ================================================================ */} {t('filter.color_heading', 'Color')} {COLOR_OPTIONS.map((color) => { const isSelected = colors.includes(color.name); return ( toggleColor(color.name)} accessibilityRole="button" accessibilityState={{ selected: isSelected }} accessibilityLabel={`${t('product.color', 'Color')} ${color.name}`} className="items-center" style={({ pressed }: { pressed: boolean }): ViewStyle => ({ opacity: pressed ? 0.7 : 1, })} > {color.name} ); })} {/* ================================================================ */} {/* Action buttons */} {/* ================================================================ */}

Navigation (3)

Filter Sort Bar

Product Header

Filter Sheet