Untitled

import React from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { View, Text } from 'react-native-ui-lib';
import { ScrollView } from 'react-native-gesture-handler';

import RealizedTransactions from '../../../components/business/RealizedTransactions';
import { Button, Icon, PopUpMessageGradient } from '../../../components/ui';
import { useColors } from '../../../hooks/useColors';
import DepthStats from '../../../components/business/DepthStats';
import { CompanyRatingInfo } from '../../../components/business';
import { CurrencyChart, FinancialsChart, SpiderChart } from '../../../components/business/Chart';
import { GradientCardList } from '../../../components/ui/Market';

export const FundamentalScreen = () => {
  const { t } = useTranslation();
  const { colors }: any = useColors();
  const ratingData = [
    { name: 'Efficiency', score: 1.5 },
    { name: 'Liquidity', score: 2 },
    { name: 'Leverage', score: 2.3 },
    { name: 'Profitability', score: 4.4 },
    { name: 'Growth', score: 3.5 },
  ];
  const multipleData = [
    { name: 'P/E', value: 36.78 },
    { name: 'M/B', value: 24.89 },
    { name: 'PEG', value: 'n/a' },
    { name: 'P/S', value: 27.58 },
    { name: 'EV/EBITDA', value: -37.78 },
    { name: 'EV/NOP', value: 'n/a' },
  ];
  const dataFinancial = [
    { date: 'June 2021', sales: 10000000, profit: -11000000, netProfit: 4000000 },
    { date: 'Sep 2021', sales: 14000000, profit: 9000000, netProfit: -4000000 },
    { date: 'Dec 2021', sales: -10000000, profit: 12000000, netProfit: 6000000 },
    { date: 'Mar 2022', sales: 9000000, profit: -13000000, netProfit: 5000000 },
  ];
  return (
    <>
      <ScrollView height={100}>
        <PopUpMessageGradient
          key={'fundamentals'}
          text={t(
            'Fundamental analysis focuses on getting to know a company and understanding some of the factors that may affect its stock price, such as  financial health, management teams competency, industry trends, competitive positioning, and macroeconomic influences.',
          )}
          icon={<Icon name="warningGr" width={24} height={24} />}
          enableHiding={true}
        />
        <View margin-20>
          <SpiderChart />
          <CompanyRatingInfo data={ratingData} />
        </View>
        <View style={styles(colors).topBorder}>
          <View row center>
            <Icon name="warningGr" width={24} height={24} />
            <Text style={styles(colors).textColor}>{t('allPriceLevels')}</Text>
          </View>
        </View>
        <View padding-20>
          <Text>Multiples</Text>
          <View marginT-20>
            <GradientCardList
              data={multipleData}
              renderItem={({ item, index }) => (
                <View style={{ height: 70 }} key={index} center>
                  <Text center>{item.name}</Text>
                  <Text center marginT-10>
                    {item.value}
                  </Text>
                </View>
              )}
              onItemPress={index => console.log(index)}
              numColumns={3}
            />
          </View>
        </View>
        <View margin-20>
          <Text>{t('Foreign currency information')}</Text>
          <View marginT-10 style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', borderRadius: 8 }}>
            <CurrencyChart />
          </View>
        </View>
        <View margin-20>
          <Text>{t('Company financials')}</Text>
          <View marginT-10 style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', borderRadius: 8 }}>
            <View margin-20>
              <FinancialsChart
                data={dataFinancial}
                barColors={[colors.elektricBlueDk, colors.brightNavyDk, colors.darkBlueGreyDk]}
                financialLabels={['Sales Revenue', 'Core Profit', 'Net Profit']}
              />
            </View>
            <TouchableOpacity marginL-10>
              <View marginL-10 row>
                <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-10 style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', borderRadius: 8 }}>
            <View margin-20>
              <FinancialsChart
                data={dataFinancial}
                barColors={['rgba(175, 239, 189, 1)', 'rgba(38, 185, 176, 1)', 'rgba(162, 124, 242, 1)']}
                financialLabels={['Equities', 'Net Debth', 'Total Assets']}
              />
            </View>
            <TouchableOpacity marginL-10>
              <View marginL-10 row>
                <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-10 style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', borderRadius: 8 }}>
            <View margin-20>
              <FinancialsChart
                data={dataFinancial}
                barColors={['rgba(162, 124, 242, 1)', 'rgba(112, 39, 185, 1)', 'rgba(48, 48, 135, 1)']}
                financialLabels={[
                  'Cash and Cash Equivalents at the Beginning od the Period',
                  'Cash and Cash Equivalents at the end of the Period',
                  'Cash Flows from Operating Activities',
                ]}
              />
            </View>
            <TouchableOpacity marginL-10>
              <View marginL-10 row>
                <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>
        <View row center marginT-20>
          <Button style={styles(colors).buttonSuccess} success label={t('BUY')} onPress={() => {}} />
          <Button style={styles(colors).buttonDanger} danger label={t('SELL')} onPress={() => {}} />
        </View>
      </ScrollView>
    </>
  );
};

const styles = (colors: any) =>
  StyleSheet.create({
    buttonSuccess: {
      width: 148,
      height: 48,
    },
    buttonDanger: {
      width: 148,
      height: 48,
      marginLeft: 16,
    },
    textColor: {
      color: colors.action,
      fontSize: 12,
      marginBottom: 20,
      marginLeft: 20,
    },
    arrowStyle: {
      marginLeft: 10,
      marginTop: 3,
    },
    topBorder: {
      borderTopWidth: 1,
      borderColor: colors.white20,
      opacity: 0.4,
    },
  });