Untitled

import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native-ui-lib';
import { FlatList, StyleSheet, useWindowDimensions } from 'react-native';
import { useTranslation } from 'react-i18next';

import { useColors } from '../../hooks';
import Matriks from '../Matriks/module';
import { ScrollView } from 'react-native-gesture-handler';
import { toNumber } from 'lodash';

type Props = {
  symbolCode: string;
};

export function OrderBook({ symbolCode }: Props) {
  const { colors }: any = useColors();
  const { t } = useTranslation();
  const header = (t: any) => (
    <View marginV-10 row center>
      {[, 'Qty', 'BUY', 'SELL', 'Qty'].map((label, index) => (
        <Text key={index} marginL-30 marginR-30 secondaryText body2>
          {t(label)}
        </Text>
      ))}
    </View>
  );
  const [orderBookData, setOrderBookData] = useState<any[]>([]);

  const subscribeOrderBook = async () => {
    try {
      await Matriks.subscribeOrderBook('GARAN', (response: any) => {
        setOrderBookData(response);
      });
    } catch (error) {
      console.log('getPriceLevelAnalysis error', error);
    }
  };

  useEffect(() => {
    subscribeOrderBook();
  }, []);
  const data = orderBookData?.list || [];

  const buyQtySum = data.reduce(
    (acc: any, item: any) => acc + (item.bidQuantity ? toNumber(item.bidQuantity.replace(',', '')) : 0),
    0,
  );
  const sellQtySum = data.reduce(
    (acc: any, item: any) => acc + (item.askQuantity ? toNumber(item.askQuantity.replace(',', '')) : 0),
    0,
  );
  const buySum = data.reduce((acc: any, item: any) => acc + (item.bidPrice ? toNumber(item.bidPrice) : 0), 0);
  const sellSum = data.reduce((acc: any, item: any) => acc + (item.askPrice ? toNumber(item.askPrice) : 0), 0);

  return data?.length > 0 ? (
    <View center>
      <FlatList
        data={data}
        ListHeaderComponent={() => header(t)}
        renderItem={({ item, index }: any) => (
          <View row marginB-20 center>
            <Text key={index} body2 primaryText center flex-1>
              {item.bidQuantity}
            </Text>
            <Text key={index} body2 primaryText center style={styles(colors).greenColor} flex-1>
              {item.bidPrice}
            </Text>
            <Text key={index} body2 primaryText center style={styles(colors).redColor} flex-1>
              {item.askPrice}
            </Text>
            <Text key={index} body2 primaryText center flex-1>
              {item.askQuantity}
            </Text>
          </View>
        )}
      />
      <View center style={styles(colors).topBorder}>
        <View marginV-10 row>
          <Text body2 marginL-30 marginR-30>
            {buyQtySum}
          </Text>
          <Text body2 style={{ color: colors.greenPrice }} marginL-30 marginR-30>
            {(buySum / data.length).toFixed(2)}
          </Text>
          <Text body2 style={{ color: colors.redPrice }} marginL-30 marginR-30>
            {(sellSum / data.length).toFixed(2)}
          </Text>
          <Text body2 marginL-30 marginR-30>
            {sellQtySum}
          </Text>
        </View>
      </View>
    </View>
  ) : null;
}

const styles = (colors: any) =>
  StyleSheet.create({
    redColor: {
      color: colors.redPrice,
    },
    greenColor: {
      color: colors.greenPrice,
    },
    topBorder: {
      borderTopWidth: 1,
      borderColor: colors.white20,
    },
  });