Untitled

import React, { useEffect, useRef, useState, memo } from 'react';
import { Text, View } from 'react-native-ui-lib';
import { Matriks } from '../Matriks';
import { StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
import { FlatList } from 'react-native';
import { useTranslation } from 'react-i18next';

import { useColors } from '../../hooks';
import { useMatriksContext } from '../../context/MatriksStore';
import Icon from '../ui/Icon';
import { toNumber } from 'lodash';
import { formattedByLanguage } from '../../utils/formatCurrency';
import { navigateOrders } from '../../hooks/navigateOrders';

const header = (t: any) => (
  <View row center>
    {['order', 'Qty', 'BUY', 'SELL', 'Qty', 'orders'].map((label, index) => (
      <Text key={index} flex-1 center secondaryText body2>
        {t(label)}
      </Text>
    ))}
  </View>
);

const DepthStats = ({ symbolCode, showInfo }: any) => {
  const { colors }: any = useColors();
  const dataListRef = useRef([]);
  const [data, setData]: any = useState([]);
  const { t, i18n } = useTranslation();
  const [depthData, setDepthData]: any = useMatriksContext();
  const [dataStats, setDataStats]: any = useState([]);
  const [priceLevelsSize, setPriceLevelsSize] = useState(5);
  const [showAllLevels, setShowAllLevels] = useState(false);
  const { onSellStock, onBuyStock } = navigateOrders(symbolCode);

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

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

  useEffect(() => {
    if (symbolCode) {
      Matriks.subscribeDepthStats(symbolCode, (resp: any) => {
        if (resp) {
          setDataStats(resp);
        }
      });
      return () => {
        Matriks.unsubscribeDepthStats();
      };
    }
  }, [symbolCode]);

  const toggleSize = () => {
    setPriceLevelsSize(priceLevelsSize === 5 ? 20 : 5);
    setShowAllLevels(!showAllLevels);
  };
  let { width } = useWindowDimensions();

  const widthX = width - 270 - 32;

  const maxBuy = Math.max(...data.map((item: any) => parseFloat(item?.bidQuantity?.replace(',', ''))));
  const maxSell = Math.max(...data.map((item: any) => parseFloat(item?.askQuantity?.replace(',', ''))));
  const orderBuySum = data.reduce((acc: any, item: any) => acc + toNumber(item.bidOrderCount), 0);
  const orderSellSum = data.reduce((acc: any, item: any) => acc + toNumber(item.askOrderCount), 0);
  const x = widthX / maxBuy;
  const y = widthX / maxSell;

  function convertToInteger(number) {
    if (number !== undefined && number !== null) {
      const numberString = number.toString();
      const integerString = numberString?.replace(/\.|,/g, '');
      return parseInt(integerString, 10);
    } else {
      return 0;
    }
  }
  const renderItem = ({ item }: any) => {
    return (
      <View center row flex-6 marginV-12>
        <View center style={{ position: 'absolute' }}>
          <View style={styles(colors).greenColorView} width={x * parseFloat(item?.bidQuantity?.replace(',', ''))} />
          <View style={styles(colors).verticalLine} />
          <View style={styles(colors).redColorView} width={y * parseFloat(item?.askQuantity?.replace(',', ''))} />
        </View>
        <Text flex-1 center primaryText body2>
          {formattedByLanguage(i18n, convertToInteger(item?.bidOrderCount), 0)}
        </Text>
        <Text flex-1 center primaryText body2>
          {formattedByLanguage(i18n, convertToInteger(item?.bidQuantity), 0)}
        </Text>
        <View flex-1>
          <TouchableOpacity onPress={() => onBuyStock(formattedByLanguage(i18n, toNumber(item?.bidPrice)))}>
            <Text center  style={styles(colors).priceBuySum} body2>
              {formattedByLanguage(i18n, toNumber(item?.bidPrice))}
            </Text>
          </TouchableOpacity>
        </View>
        <View flex-1>
          <TouchableOpacity onPress={() => onSellStock(formattedByLanguage(i18n, toNumber(item?.askPrice)))}>
            <Text center style={styles(colors).priceSellSum} body2>
              {formattedByLanguage(i18n, toNumber(item?.askPrice))}
            </Text>
          </TouchableOpacity>
        </View>
        <Text flex-1 center primaryText body2>
          {formattedByLanguage(i18n, convertToInteger(item?.askQuantity), 0)}
        </Text>
        <Text flex-1 center primaryText body2>
          {formattedByLanguage(i18n, convertToInteger(item?.askOrderCount), 0)}
        </Text>
      </View>
    );
  };

  const renderInfo = () => {
    return (
      <View center row flex-6 style={styles(colors).topBorder}>
        <Text flex-1 center primaryText heading7>
          {formattedByLanguage(i18n, convertToInteger(orderBuySum), 0)}
        </Text>
        <Text flex-1 center primaryText heading7>
          {formattedByLanguage(i18n, convertToInteger(dataStats?.bidQuantity), 0)}
        </Text>
        <Text flex-1 center style={styles(colors).priceBuySum}>
          {formattedByLanguage(i18n, toNumber(dataStats?.bidPrice))}
        </Text>

        <Text flex-1 center style={styles(colors).priceSellSum} heading7>
          {formattedByLanguage(i18n, toNumber(dataStats?.askPrice))}
        </Text>
        <Text flex-1 center primaryText heading7>
          {formattedByLanguage(i18n, convertToInteger(dataStats?.askQuantity), 0)}
        </Text>
        <Text flex-1 center primaryText heading7>
          {formattedByLanguage(i18n, convertToInteger(orderSellSum), 0)}
        </Text>
      </View>
    );
  };
  return (
    <>
      {data && data.length > 0 && (
        <View marginB-20>
          {header(t)}
          <FlatList
            onScroll={e => e.preventDefault()}
            showsVerticalScrollIndicator={false}
            data={data}
            renderItem={renderItem}
            nestedScrollEnabled={true}
            scrollEnabled={false}
            keyExtractor={(item, index) => `item-${index}`}
          />
          {showInfo && renderInfo()}
          {data.length >= 5 && (
            <View marginT-16>
              <TouchableOpacity onPress={toggleSize}>
                <View row center>
                  <Text style={styles(colors).textColor}>
                    {showAllLevels ? t('top5PriceLevels') : t('allPriceLevels')}
                  </Text>
                  {!showAllLevels && (
                    <Icon
                      style={styles(colors).arrowStyle}
                      name="arrowRight"
                      width={6}
                      height={10}
                      fill={colors.action}
                    />
                  )}
                </View>
              </TouchableOpacity>
            </View>
          )}
        </View>
      )}
    </>
  );
};

export default memo(DepthStats);

const styles = (colors: any) =>
  StyleSheet.create({
    redColorView: {
      backgroundColor: colors.darkRedBg,
      position: 'absolute',
      left: 0,
      height: 24,
    },
    verticalLine: {
      height: 70,
      borderRightWidth: 1,
      position: 'absolute',
      borderColor: colors.white20,
    },
    greenColorView: {
      backgroundColor: colors.darkGreenBg,
      position: 'absolute',
      right: 0,
      height: 24,
    },
    topBorder: {
      borderTopWidth: 1,
      borderColor: colors.white20,
    },
    priceBuySum: {
      color: colors.greenPrice,
    },
    priceSellSum: {
      color: colors.redPrice,
    },

    textColor: {
      color: colors.action,
      fontSize: 12,
    },
    arrowStyle: {
      marginLeft: 10,
      marginTop: 3,
    },
  });