Untitled

import React, { useEffect, useRef, useState, memo } from 'react';
import { Text, View } from 'react-native-ui-lib';
import { Matriks } from '../Matriks';
import { StyleSheet } from 'react-native';
import { FlatList } from 'react-native';
import { useColors } from '../../hooks';
import { useMatriksContext } from '../../context/MatriksStore';
import { useTranslation } from 'react-i18next';

const header = (t: any) => (
  <View paddingH-16 style={styles.headerStyles} row>
    <View flex-1 centerV>
      <Text secondaryText body2>
        {t('order')}
      </Text>
    </View>
    <View flex-1 centerV>
      <Text secondaryText body2 style={styles.textAlignRight}>
        {t('Qty')}
      </Text>
    </View>
    <View flex-1 centerV paddingR-8 style={styles.buyButton}>
      <Text secondaryText body2 style={styles.textAlignRight}>
        {t('BUY')}
      </Text>
    </View>
    <View flex-1 centerV paddingL-8>
      <Text secondaryText body2>
        {t('SELL')}
      </Text>
    </View>

    <View flex-1 centerV>
      <Text secondaryText body2>
        {t('Qty')}
      </Text>
    </View>

    <View flex-1 centerV>
      <Text secondaryText body2 style={styles.textAlignRight}>
        {t('orders')}
      </Text>
    </View>
  </View>
);

const DepthStats = ({ symbolCode, size = 10 }) => {
  const { colors } = useColors();
  const dataListRef = useRef([]);
  const [data, setData] = useState([]);
  const { t } = useTranslation();
  const [depthData, setDepthData] = useMatriksContext();

  useEffect(() => {
    if (depthData && depthData?.type === 'depth') {
      const update = { ...depthData };
      dataListRef.current.splice(0, 0, update);
      if (dataListRef.current.length > size) {
        dataListRef.current.pop();
      }
      setData(dataListRef.current);
    }
  }, [depthData]);

  useEffect(() => {
    if (symbolCode) {
      Matriks.subscribeDepth(symbolCode, resp => {
        if (resp?.depthList) {
          resp?.depthList.map(item => setDepthData({ ...item, type: 'depth' }));
        } else {
          setDepthData({ ...resp, type: 'depth' });
        }
      });
      return () => {
        Matriks.unsubscribeDepth();
      };
    }
  }, [symbolCode]);

  const x = 50;
  const y = 50;

  const buySum = data.reduce((acc: any, item: any) => acc + item.bidQuantity, 0);
  const sellSum = data.reduce((acc: any, item: any) => acc + item.askQuantity, 0);

  const renderItem = ({ item, index }: any) => {
    return (
      <View paddingH-16 style={styles(colors).rowStyles} backgroundColor={index % 2 === 0 && colors.marketTableBg} row>
        <View flex-1 centerV>
          <Text body-2 primaryText>
            {item?.askOrderCount}
          </Text>
        </View>
        <View flex-1 centerV>
          <Text body-2 primaryText style={styles(colors).textAlignRight}>
            {item?.askQuantity}
          </Text>
        </View>
        <View row center>
          <View style={styles(colors).greenColorView} width={x * item.bidQuantity}>
            <View>
              <Text style={styles(colors).greenColor} key={index} body2>
                {item?.bidPrice}
              </Text>
            </View>
          </View>
          <View style={styles(colors).redColorView} width={y * item.askQuantity}>
            <Text style={styles(colors).redColor} key={index} body2>
              {item?.askPrice}
            </Text>
          </View>
        </View>
        <View flex-1 centerV>
          <Text body-2 primaryText>
            {item?.bidQuantity}
          </Text>
        </View>
        <View flex-1 centerV>
          <Text body-2 primaryText style={styles(colors).textAlignRight}>
            {item?.bidOrderCount}
          </Text>
        </View>
      </View>
    );
  };

  return (
    <>
      {data && data.length > 0 && (
        <View marginB-20 style={styles(colors).container}>
          <View paddingH-16>
            <Text heading6>{t('DEPTH')}</Text>
          </View>
          <FlatList
            onScroll={e => e.preventDefault()}
            ListHeaderComponent={() => header(t)}
            showsVerticalScrollIndicator={false}
            data={data}
            renderItem={renderItem}
            nestedScrollEnabled={true}
            scrollEnabled={false}
            keyExtractor={(item, index) => `item-${index}`}
          />
          <View center style={styles(colors).topBorder} marginT-10>
            <View marginT-10 marginB-10 row>
              <Text body2 style={{ color: colors.greenPrice }} flex-1 center>
                {buySum}
              </Text>
              <Text body2 style={{ color: colors.redPrice }} flex-1 center>
                {sellSum}
              </Text>
            </View>
          </View>
        </View>
      )}
    </>
  );
};

export default memo(DepthStats);

const styles = (colors: any) =>
  StyleSheet.create({
    redColor: {
      color: colors.redPrice,
      width: 80,
    },
    greenColor: {
      color: colors.greenPrice,
      justifyContent: 'center',
      textAlign: 'right',
      width: 80,
    },
    redColorView: {
      backgroundColor: colors.darkRedBg,
      backgroundOpacity: 0.6,
      height: 24,
      justifyContent: 'center',
    },
    greenColorView: {
      backgroundColor: colors.darkGreenBg,
      backgroundOpacity: 0.6,
      justifyContent: 'center',
      height: 24,
    },
    topBorder: {
      borderTopWidth: 1,
      borderColor: colors.white20,
    },
    container: { flex: 1 },
    headerStyles: { height: 40 },
    rowStyles: { height: 40 },
    buyButton: { borderRightWidth: 1, borderRightColor: 'rgba(255, 255, 255, 0.20)' },
    textAlignRight: { textAlign: 'right' },
  });