import React, { useCallback } from 'react';
import { useNavigation, useRoute } from '@react-navigation/native';
import { isEmpty } from 'lodash';
import { WatchlistDefaultList } from '../../../components/business/Watchlist/WatchlistDefaultList';
import { BasicHeader } from '../../../components/ui/BasicHeader';
import { GetMatriksIndicators } from '../../../api/matriks';
import { Matriks } from '../../../components/Matriks';
import { MarketTopMoverList } from '../../../components/ui/Market';
import { TAB_INDEXES } from '../../../components/ui/Market/trendTabs';
import i18n from '../../../translations';
import { Platform } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { Text, TouchableOpacity, View } from 'react-native-ui-lib';
import colors from 'react-native-ui-lib/src/style/colors';
import { Icon } from '../../../components/ui';
const HEADER_VIEW_HEIGHT = Platform.select({ ios: 205, android: 180 });
const ITEM_HEIGHT = 84;
const getItemLayout = (data: any, index: number) => ({
length: ITEM_HEIGHT,
offset: ITEM_HEIGHT * (index + 1) + HEADER_VIEW_HEIGHT,
index,
});
export function SelectPredefinedWatchList() {
const navigation = useNavigation();
const { data: indicators } = GetMatriksIndicators();
const {
params: { selectedData },
} = useRoute();
let VIEWABLE_ITEMS: any[] = [];
const SeperatorView = useCallback(() => <View marginV-10 />, []);
const onViewableItemsChanged = ({ viewableItems }: any) => {
const renew = async () => {
Matriks.unsubscribe();
if (!isEmpty(viewableItems)) {
VIEWABLE_ITEMS = viewableItems;
Matriks.subscribeSymbol(viewableItems, () => {}, indicators || []);
}
};
renew();
};
const renderItem = ({ item }: any) => {
return (
<TouchableOpacity
spread
row
paddingV-3
onPress={() => {
navigation.navigate('selectPredefinedList', { selectedItem: item });
}}>
<Text heading6 color={colors.primaryText}>
{i18n.language === 'en' ? item.desc : item.descTr}
</Text>
<Icon name="arrowRight" width={6} height={10} fill={colors.secondaryText} />
</TouchableOpacity>
);
};
console.log(selectedData);
return (
<>
{selectedData?.key === 'FUTURE' || selectedData?.key === 'OPTION' || selectedData?.key === 'WARRANT' ? (
<>
<BasicHeader
title={i18n.language === 'en' ? selectedData?.desc : selectedData?.descTr}
backFunction={navigation.goBack}
paddingH={0}
predefinedIcons={true}>
<MarketTopMoverList tabs={TAB_INDEXES[selectedData.key]} />
</BasicHeader>
</>
) : selectedData?.children ? (
<>
<BasicHeader
title={i18n.language === 'en' ? selectedData?.desc : selectedData?.descTr}
backFunction={navigation.goBack}>
<FlatList
data={selectedData?.children}
ItemSeparatorComponent={SeperatorView}
showsVerticalScrollIndicator={false}
renderItem={renderItem}
/>
</BasicHeader>
</>
) : (
<BasicHeader
title={i18n.language === 'en' ? selectedData?.desc : selectedData?.descTr}
backFunction={navigation.goBack}
paddingH={0}
predefinedIcons={true}>
<WatchlistDefaultList
noCalculateLayout
getItemLayout={getItemLayout}
onViewableItemsChanged={onViewableItemsChanged}
data={selectedData?.value}
viewAll
notShowSecond
showVolume={0}
itemLimit={10}
screenName={'marketSymbolDetail'}
/>
</BasicHeader>
)}
</>
);
}