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(null);
  const [notData, setNotData] = useState(true);
  const today = moment().subtract(0, 'days').format('YYYY-MM-DD');
  const yesterday = moment().subtract(0, 'days').format('YYYY-MM-DD');

  const [dateBrokerId, setDateBrokerId] = useState([today, today]);

  const { data: data, isLoading: isBrokerIdLoading } = GetBrokerIdInformation(
    symbolCode,
    dateBrokerId,
    t('other'),
    license,
  );

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

  useEffect(() => {
    if (!isBrokerIdLoading && notData) {
      if (!(data?.asks.length > 0) && !(data?.bids?.length > 0)) {
        setDateBrokerId([yesterday, yesterday]);
      }
      setBrokerIdData(data);
      return;
    }
  }, [data, isBrokerIdLoading, notData]);

  useEffect(() => {
    if (brokerIdData) {
      if (!(brokerIdData?.asks?.length > 0) && !(brokerIdData?.bids?.length > 0)) {
        setNotData(false);
        setBrokerIdData(null);
      }
    }
  }, [brokerIdData]);

  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 ? (
            <>
              {notData ? (
                <>
                  <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>
                  )}
                </>
              ) : (
                <View center flex marginT-70>
                  <Icon name="noResult" width={96} height={96} />
                  <Text marginT-24 body1 secondaryText>
                    {t('brokerDataNotFound')}
                  </Text>
                </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,
    },
  });