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 DepthStats = ({ symbolCode, showInfo }: any) => {
  const { colors }: any = useColors();
  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);
  const [firstData, setFirstData] = useState([]);

  useEffect(() => {
    if (symbolCode) {
      Matriks.subscribeDepth(symbolCode, (resp: any) => {
        if (resp?.depthList) {
          setFirstData(resp?.depthList);
        } else {
          setDepthData({ ...resp, type: 'depth' });
        }
      });
      return () => {
        Matriks.unsubscribeDepth();
      };
    }
  }, [symbolCode]);
  useEffect(() => {
    if (depthData?.type === 'depth') {
      const updatedFirstData: any = [...firstData];
      updatedFirstData[depthData?.rowNumber] = depthData;
      setFirstData(updatedFirstData);
    }
  }, [depthData]);

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

  useEffect(() => {
    setFirstData([]);
  }, [symbolCode]);

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

  const widthX = width - 270 - 32;
  const maxBuy = Math.max(...firstData.map((item: any) => parseFloat(item?.bidQuantity?.replace(',', ''))));
  const maxSell = Math.max(...firstData.map((item: any) => parseFloat(item?.askQuantity?.replace(',', ''))));
  const orderBuySum = firstData.reduce((acc: any, item: any) => acc + toNumber(item.bidOrderCount), 0);
  const orderSellSum = firstData.reduce((acc: any, item: any) => acc + toNumber(item.askOrderCount), 0);
  const x = widthX / maxBuy;
  const y = widthX / maxSell;
  const header = () => (
    <View row center marginH-24>
      <Text flex-1 secondaryText body2 style={styles(colors).textAlignLeft}>
        {t('order')}
      </Text>
      <Text flex-1 secondaryText body2 style={styles(colors).textAlignRight}>
        {t('Qty')}
      </Text>
      <Text flex-1 secondaryText body2 marginH-10 style={styles(colors).textAlignRight}>
        {t('BUY')}
      </Text>
      <Text flex-1 secondaryText body2 marginH-10 style={styles(colors).textAlignLeft}>
        {t('SELL')}
      </Text>
      <Text flex-1 secondaryText body2 style={styles(colors).textAlignLeft}>
        {t('Qty')}
      </Text>
      <Text flex-1 secondaryText body2 style={styles(colors).textAlignRight}>
        {t('orders')}
      </Text>
    </View>
  );
  const renderItem = ({ item }: any) => {
    return (
      <View center row marginV-12 marginH-24>
        <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 primaryText overline2 style={styles(colors).textAlignLeft}>
          {formattedByLanguage(i18n, toNumber(item?.bidOrderCount), 0, true)}
        </Text>
        <Text flex-1 primaryText overline2 style={styles(colors).textAlignRight}>
          {formattedByLanguage(i18n, toNumber(item?.bidQuantity), 0, true)}
        </Text>
        <View flex-1 paddingH-10>
          <TouchableOpacity onPress={() => onBuyStock(formattedByLanguage(i18n, toNumber(item?.bidPrice)))}>
            <Text style={styles(colors).priceBuySum} overline2>
              {item?.bidPrice > 1000
                ? formattedByLanguage(i18n, toNumber(item?.bidPrice), 1, true)
                : formattedByLanguage(i18n, toNumber(item?.bidPrice))}
            </Text>
          </TouchableOpacity>
        </View>
        <View flex-1 paddingH-10>
          <TouchableOpacity onPress={() => onSellStock(formattedByLanguage(i18n, toNumber(item?.askPrice)))}>
            <Text style={styles(colors).priceSellSum} overline2>
              {item?.askPrice > 1000
                ? formattedByLanguage(i18n, toNumber(item?.askPrice), 1, true)
                : formattedByLanguage(i18n, toNumber(item?.askPrice))}
            </Text>
          </TouchableOpacity>
        </View>
        <Text flex-1 primaryText overline2 style={styles(colors).textAlignLeft}>
          {formattedByLanguage(i18n, toNumber(item?.askQuantity), 0, true)}
        </Text>
        <Text flex-1 primaryText overline2 style={styles(colors).textAlignRight}>
          {formattedByLanguage(i18n, toNumber(item?.askOrderCount), 0, true)}
        </Text>
      </View>
    );
  };

  const renderInfo = () => {
    return (
      <View center row marginH-24>
        <Text flex-1 primaryText heading7 marginT-10 style={styles(colors).textAlignLeft}>
          {formattedByLanguage(i18n, toNumber(orderBuySum), 0, true)}
        </Text>
        <Text flex-1 primaryText heading7 marginT-10 style={styles(colors).textAlignRight}>
          {formattedByLanguage(i18n, toNumber(dataStats?.bidQuantity), 0, true)}
        </Text>
        <Text flex-1 style={styles(colors).priceBuySum} heading7 marginT-10 marginH-10>
          {dataStats?.bidPrice > 1000
            ? formattedByLanguage(i18n, toNumber(dataStats?.bidPrice), 1, true)
            : formattedByLanguage(i18n, toNumber(dataStats?.bidPrice))}
        </Text>
        <Text flex-1 style={styles(colors).priceSellSum} heading7 marginT-10 marginH-10>
          {dataStats?.askPrice > 1000
            ? formattedByLanguage(i18n, toNumber(dataStats?.askPrice), 1, true)
            : formattedByLanguage(i18n, toNumber(dataStats?.askPrice))}
        </Text>
        <Text flex-1 primaryText heading7 marginT-10 style={styles(colors).textAlignLeft}>
          {formattedByLanguage(i18n, toNumber(dataStats?.askQuantity), 0, true)}
        </Text>
        <Text flex-1 primaryText heading7 marginT-10 style={styles(colors).textAlignRight}>
          {formattedByLanguage(i18n, toNumber(orderSellSum), 0, true)}
        </Text>
      </View>
    );
  };
  const slicedFirstData = firstData.slice(0, priceLevelsSize);

  return (
    <>
      {firstData && firstData.length > 0 && (
        <>
          <View marginB-20>
            {header()}
            <FlatList
              onScroll={e => e.preventDefault()}
              showsVerticalScrollIndicator={false}
              data={showAllLevels ? firstData : slicedFirstData}
              renderItem={renderItem}
              nestedScrollEnabled={true}
              scrollEnabled={false}
              keyExtractor={(item, index) => `item-${index}`}
            />
            <View style={styles(colors).topBorder} />
            {showInfo && renderInfo()}
            {firstData.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>
          <View marginB-16 style={styles(colors).topBorderOpacity} />
        </>
      )}
    </>
  );
};

export default memo(DepthStats);

const styles = (colors: any) =>
  StyleSheet.create({
    redColorView: {
      backgroundColor: colors.darkRedBg,
      position: 'absolute',
      left: 0,
      height: 24,
      borderRadius: 3,
    },
    verticalLine: {
      height: 40,
      borderRightWidth: 1,
      position: 'absolute',
      borderColor: colors.white20,
    },
    greenColorView: {
      backgroundColor: colors.darkGreenBg,
      position: 'absolute',
      right: 0,
      height: 24,
      borderRadius: 3,
    },
    topBorder: {
      borderTopWidth: 1,
      borderColor: colors.white20,
    },
    priceBuySum: {
      color: colors.greenPrice,
      textAlign: 'right',
    },
    priceSellSum: {
      color: colors.redPrice,
      textAlign: 'left',
    },
    textColor: {
      color: colors.action,
      fontSize: 12,
    },
    arrowStyle: {
      marginLeft: 10,
      marginTop: 3,
    },
    textAlignRight: {
      textAlign: 'right',
    },
    textAlignLeft: {
      textAlign: 'left',
    },
    topBorderOpacity: {
      borderTopWidth: 1,
      borderColor: colors.white20,
      opacity: 0.4,
    },
  });