Untitled

import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ActivityIndicator, Dimensions, StyleSheet } from 'react-native';
import { View, Text } from 'react-native-ui-lib';
import { ScrollView } from 'react-native-gesture-handler';
import { TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import moment from 'moment';
import { Icon, PopUpMessageGradient } from '../../../components/ui';
import { useColors } from '../../../hooks/useColors';
import { HalfDonutChart } from '../../../components/business/Chart';
import ModalController from '../../../components/Modal/ModalController';
import { createDateLabel } from '../../../components/business/DateRangePicker/utils/createDateLabel';
import { formattedByLanguage } from '../../../utils/formatCurrency';
import { BuyLicense } from '../../../components/business';
import { GetBrokerIdInformation } from '../../../api/matriks';
import LinearGradient from 'react-native-linear-gradient';

export const BrokerIdScreen = ({ symbolCode, symbolData, license, isViop }: any) => {
  const { t, i18n } = useTranslation();
  const navigation = useNavigation();
  const { colors }: any = useColors();
  const height = Dimensions.get('screen').height;
  const [brokerIdData, setBrokerIdData] = useState([]);
  const [innitialCount, setInnitialCount] = useState(0);

  const [dateBrokerId, setDateBrokerId] = useState([
    moment().subtract(0, 'days').format('YYYY-MM-DD'),
    moment().subtract(0, 'days').format('YYYY-MM-DD'),
  ]);

  const { data: data, isLoading: isBrokerIdLoading } = GetBrokerIdInformation(
    symbolCode,
    dateBrokerId,
    t('other'),
    license,
  );
  useEffect(() => {
    setInnitialCount(0);
    setBrokerIdData([]);
  }, [symbolCode]);

  useEffect(() => {
    const startDate = moment().subtract(innitialCount, 'days').format('YYYY-MM-DD');
    const endDate = moment().subtract(innitialCount, 'days').format('YYYY-MM-DD');
    setDateBrokerId([startDate, endDate]);
  }, [symbolCode, innitialCount]);

  useEffect(() => {
    if (!isBrokerIdLoading) {
      if (!(data?.asks.length > 0) && !(data?.bids?.length > 0)) {
        setInnitialCount(innitialCount + 1);
      }
      setBrokerIdData(data);
    }
  }, [data, isBrokerIdLoading]);

  console.log(!(data?.asks.length > 0) && !(data?.bids?.length > 0));
  const infoText: string = 'brokerIdInfo';
  const title: string = 'marketBrokerId';
  const brokerIdTitle: string = 'brokerId';

  const onChangeDate = (date: any) => {
    date[1] = date[1] || date[0];
    setDateBrokerId(date);
  };

  const formatNetQuantity = (value: any) => {
    const million = 1000000;
    const billion = 1000000000;
    let formattedValue;
    let ext = '';

    if (value < million) {
      formattedValue = formattedByLanguage(i18n, value, 0);
    } else if (value >= million && value < billion) {
      ext = ' Mn';
      formattedValue = formattedByLanguage(i18n, value / million, 3);
    } else {
      ext = ' Mr';
      formattedValue = formattedByLanguage(i18n, value / billion, 3);
    }

    return `${formattedValue}${ext}`;
  };

  const chartTopBidsData = useMemo(
    () =>
      brokerIdData?.topBids?.map((item: any) => ({
        first: item?.agent,
        second: formatNetQuantity(item?.netQuantity),
        third: item?.netPercent,
        thirdFormatted: formattedByLanguage(i18n, item?.netPercent) + '%',
      })),
    [brokerIdData],
  );

  const chartTopAsksData = useMemo(
    () =>
      brokerIdData?.topAsks?.map((item: any) => ({
        first: item?.agent,
        second: formatNetQuantity(item?.netQuantity),
        third: item?.netPercent,
        thirdFormatted: formattedByLanguage(i18n, item?.netPercent) + '%',
      })),
    [brokerIdData],
  );

  return (
    <LinearGradient
      locations={[0, 1]}
      angle={180}
      colors={[colors.marketBgStart, colors.marketBgEnd]}
      style={styles(colors).flex}>
      <ScrollView>
        <View flex>
          <PopUpMessageGradient
            key={'bistIndicesHeatmaps'}
            text={isViop ? t('brokerIdPopUpMessageViop') : t('brokerIdPopUpMessage')}
            icon={<Icon name="warningGr" width={24} height={24} />}
            enableHiding={true}
            infoScreen={'marketInfo'}
            infoText={infoText}
            title={title}
            infoName={'brokerId'}
          />
          {license ? (
            <>
              <TouchableOpacity
                onPress={() => {
                  ModalController.showModal({
                    type: 'dateRange',
                    externalHeight: height / 1.4,
                    props: {
                      initialDate: dateBrokerId,
                      onChange: onChangeDate,
                      showButton: true,
                    },
                  });
                }}>
                <View row marginH-24>
                  <Text primaryText body2 marginR-4>
                    {t('showPeriod')}
                  </Text>
                  <Text style={styles(colors).calendarStyle} center primaryText>
                    {createDateLabel(dateBrokerId)}
                  </Text>
                  <View center marginL-5>
                    <Icon name="calendar" width={12} height={13} />
                  </View>
                </View>
              </TouchableOpacity>
              {!isBrokerIdLoading ? (
                <>
                  <View marginT-20 style={styles(colors).cardStyle} margin-20>
                    <HalfDonutChart
                      colorType="buyers"
                      title={t('top5Buy')}
                      data={chartTopBidsData}
                      titles={[t('company'), `${t('netQuantity')}`, `${t('net')} %`]}
                    />
                    <TouchableOpacity
                      onPress={() =>
                        navigation.navigate('marketBrokerIdDetail', {
                          brokerIdTitle: brokerIdTitle,
                          symbolData: symbolData,
                          data: brokerIdData,
                        })
                      }>
                      <View marginL-10 row center marginB-20 marginT-20>
                        <Text style={styles(colors).textColor}>{t('viewMoreDetails')}</Text>
                        <Icon
                          style={styles(colors).arrowStyle}
                          name="arrowRight"
                          width={6}
                          height={10}
                          fill={colors.action}
                        />
                      </View>
                    </TouchableOpacity>
                  </View>
                  <View marginT-20 style={styles(colors).cardStyle} margin-20>
                    <HalfDonutChart
                      colorType="sellers"
                      title={t('top5Sell')}
                      data={chartTopAsksData}
                      titles={[t('company'), `${t('netQuantity')}`, `${t('net')} %`]}
                    />
                    <TouchableOpacity
                      onPress={() =>
                        navigation.navigate('marketBrokerIdDetail' as never, {
                          brokerIdTitle: brokerIdTitle,
                          symbolData: symbolData,
                          data: brokerIdData,
                        })
                      }>
                      <View marginL-10 row center marginB-20 marginT-20>
                        <Text style={styles(colors).textColor}>{t('viewMoreDetails')}</Text>
                        <Icon
                          style={styles(colors).arrowStyle}
                          name="arrowRight"
                          width={6}
                          height={10}
                          fill={colors.action}
                        />
                      </View>
                    </TouchableOpacity>
                  </View>
                </>
              ) : (
                <View center padding-140>
                  <ActivityIndicator style={styles.loadingIndicator} color={colors.action} animating size="large" />
                </View>
              )}
            </>
          ) : (
            <BuyLicense text={t('brokerIdLicenseText')} />
          )}
        </View>
      </ScrollView>
    </LinearGradient>
  );
};

const styles = (colors?: any) =>
  StyleSheet.create({
    topBorder: {
      borderTopWidth: 1,
      borderColor: colors.white20,
      opacity: 0.4,
    },
    container: {
      paddingHorizontal: 20,
      paddingVertical: 8,
    },
    calendarStyle: {
      fontWeight: '500',
      fontSize: 12,
    },
    cardStyle: {
      backgroundColor: colors.halfDonutChartBg,
      borderRadius: 8,
    },
    textColor: {
      color: colors.action,
      fontSize: 12,

      marginLeft: 20,
    },
    arrowStyle: {
      marginLeft: 10,
      marginTop: 3,
    },
    flex: {
      flex: 1,
    },
  });