Untitled

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>
      )}
    </>
  );
}