@bettoredge/calcutta 0.2.0

package/src/components/sealed/SealedBidItemsTab.tsx

@@ -0,0 +1,235 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { StyleSheet, FlatList, TouchableOpacity, RefreshControl, TextInput } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaAuctionItemProps, CalcuttaBidProps } from '@bettoredge/types';
+import type { ItemImageMap } from '../../hooks/useCalcuttaItemImages';
+import type { CalcuttaLifecycleState } from '../../helpers/lifecycleState';
+import { SealedBidItemCard } from './SealedBidItemCard';
+
+type ActiveFilter = 'all' | 'not_bid' | 'my_bids';
+type BrowseFilter = 'all';
+
+interface SealedBidItemsTabProps {
+    items: CalcuttaAuctionItemProps[];
+    my_bids: CalcuttaBidProps[];
+    min_bid: number;
+    bid_increment: number;
+    escrow_balance: number;
+    market_type: string;
+    player_id?: string;
+    lifecycleState: CalcuttaLifecycleState;
+    itemImages?: ItemImageMap;
+    onPlaceBid: (calcutta_auction_item_id: string, amount: number) => void;
+    bidLoading: boolean;
+    onRefresh: () => void;
+    refreshing: boolean;
+    disabled?: boolean;
+    listHeader?: React.ReactNode;
+}
+
+const ACTIVE_FILTERS: { key: ActiveFilter; label: string }[] = [
+    { key: 'all', label: 'All' },
+    { key: 'not_bid', label: 'Not Bid' },
+    { key: 'my_bids', label: 'My Bids' },
+];
+
+const BROWSE_FILTERS: { key: BrowseFilter; label: string }[] = [
+    { key: 'all', label: 'All' },
+];
+
+export const SealedBidItemsTab: React.FC<SealedBidItemsTabProps> = ({
+    items,
+    my_bids,
+    min_bid,
+    bid_increment,
+    escrow_balance,
+    market_type,
+    player_id,
+    lifecycleState,
+    itemImages,
+    onPlaceBid,
+    bidLoading,
+    onRefresh,
+    refreshing,
+    disabled,
+    listHeader,
+}) => {
+    const { theme } = useTheme();
+    const [activeFilter, setActiveFilter] = useState<ActiveFilter>('all');
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const isBrowseMode = lifecycleState === 'pending' || lifecycleState === 'scheduled';
+
+    const myBidItemIds = useMemo(
+        () => new Set(my_bids.filter(b => b.bid_status === 'active' || b.bid_status === 'won').map(b => b.calcutta_auction_item_id)),
+        [my_bids],
+    );
+
+    const filteredItems = useMemo(() => {
+        let result = items;
+        if (!isBrowseMode) {
+            switch (activeFilter) {
+                case 'not_bid':
+                    result = result.filter(i => !myBidItemIds.has(i.calcutta_auction_item_id));
+                    break;
+                case 'my_bids':
+                    result = result.filter(i => myBidItemIds.has(i.calcutta_auction_item_id));
+                    break;
+            }
+        }
+        if (searchQuery.trim()) {
+            const q = searchQuery.trim().toLowerCase();
+            result = result.filter(i => i.item_name.toLowerCase().includes(q));
+        }
+        return result;
+    }, [items, activeFilter, isBrowseMode, myBidItemIds, searchQuery]);
+
+    const renderItem = useCallback(({ item }: { item: CalcuttaAuctionItemProps }) => {
+        const myBid = my_bids.find(
+            b => b.calcutta_auction_item_id === item.calcutta_auction_item_id
+                && (b.bid_status === 'active' || b.bid_status === 'won')
+        );
+        return (
+            <SealedBidItemCard
+                item={item}
+                my_bid={myBid}
+                min_bid={min_bid}
+                bid_increment={bid_increment}
+                escrow_balance={escrow_balance}
+                market_type={market_type}
+                player_id={player_id}
+                lifecycleState={lifecycleState}
+                itemImage={itemImages?.[item.item_id]}
+                onPlaceBid={(amount) => onPlaceBid(item.calcutta_auction_item_id, amount)}
+                bidLoading={bidLoading}
+                disabled={disabled}
+            />
+        );
+    }, [my_bids, min_bid, bid_increment, escrow_balance, market_type, player_id, lifecycleState, itemImages, onPlaceBid, bidLoading, disabled]);
+
+    const filters = isBrowseMode ? BROWSE_FILTERS : ACTIVE_FILTERS;
+    const currentFilter = isBrowseMode ? 'all' : activeFilter;
+    const setFilter = (f: string) => setActiveFilter(f as ActiveFilter);
+
+    const headerComponent = (
+        <View variant="transparent">
+            <>{listHeader}</>
+
+            {/* Search */}
+            <View variant="transparent" style={[styles.searchRow, { borderColor: theme.colors.border.subtle }]}>
+                <Ionicons name="search-outline" size={16} color={theme.colors.text.tertiary} />
+                <TextInput
+                    style={[styles.searchInput, { color: theme.colors.text.primary }]}
+                    value={searchQuery}
+                    onChangeText={setSearchQuery}
+                    placeholder="Search items..."
+                    placeholderTextColor={theme.colors.text.tertiary}
+                    autoCorrect={false}
+                />
+                {searchQuery.length > 0 && (
+                    <TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+                        <Ionicons name="close-circle" size={16} color={theme.colors.text.tertiary} />
+                    </TouchableOpacity>
+                )}
+            </View>
+
+            {/* Filter chips — hide single-filter row in browse mode */}
+            {!isBrowseMode && (
+                <View variant="transparent" style={styles.filterRow}>
+                    {filters.map(f => {
+                        const active = currentFilter === f.key;
+                        return (
+                            <TouchableOpacity
+                                key={f.key}
+                                style={[
+                                    styles.chip,
+                                    {
+                                        backgroundColor: active ? theme.colors.primary.default : theme.colors.surface.elevated,
+                                        borderColor: active ? theme.colors.primary.default : theme.colors.border.subtle,
+                                    },
+                                ]}
+                                onPress={() => setFilter(f.key)}
+                                activeOpacity={0.7}
+                            >
+                                <Text
+                                    variant="caption"
+                                    bold={active}
+                                    style={{ color: active ? '#FFFFFF' : theme.colors.text.secondary, fontSize: 11 }}
+                                >
+                                    {f.label}
+                                </Text>
+                            </TouchableOpacity>
+                        );
+                    })}
+                </View>
+            )}
+        </View>
+    );
+
+    return (
+        <View variant="transparent" style={styles.container}>
+            <FlatList
+                data={filteredItems}
+                keyExtractor={item => item.calcutta_auction_item_id}
+                renderItem={renderItem}
+                ListHeaderComponent={headerComponent}
+                contentContainerStyle={styles.list}
+                stickyHeaderIndices={[]}
+                refreshControl={
+                    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+                }
+                ListEmptyComponent={
+                    <Text variant="caption" color="tertiary" style={styles.empty}>
+                        {isBrowseMode
+                            ? 'No items available'
+                            : activeFilter === 'my_bids' ? 'No bids placed yet' : 'No items available'}
+                    </Text>
+                }
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    searchRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginHorizontal: 12,
+        marginTop: 10,
+        paddingHorizontal: 12,
+        height: 44,
+        borderRadius: 10,
+        borderWidth: 1,
+    },
+    searchInput: {
+        flex: 1,
+        marginLeft: 8,
+        fontSize: 15,
+        height: 44,
+        padding: 0,
+    },
+    filterRow: {
+        flexDirection: 'row',
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        gap: 8,
+    },
+    chip: {
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 14,
+        borderWidth: 1,
+    },
+    list: {
+        paddingBottom: 40,
+        paddingTop: 8,
+    },
+    empty: {
+        textAlign: 'center',
+        padding: 40,
+    },
+});