Untitled

/* eslint-disable react/no-unstable-nested-components */
import React, { useState } from 'react';
import { View, Text } from 'react-native-ui-lib';
import { VictoryChart, VictoryBar, VictoryAxis, VictoryGroup } from 'victory-native';
import { StyleSheet } from 'react-native';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../../hooks/useColors';
import { SecondaryTabs } from '../../ui/SecondaryTabs';

export function FinancialsChart() {
  const { colors }: any = useColors();
  const { t } = useTranslation();
  const { i18n } = useTranslation();

  const language = i18n.language === 'en' ? 'en-US' : 'tr-TR';
  const data = [
    { 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 },
  ];
  const [isSelected, setIsSelected] = useState<string[] | string>([]);

  const tabData: any[] = [
    { desc: '2', label: 'Last 12M', selected: true, key: '1' },
    { desc: '2', label: 'YTD', selected: false, key: '2' },
    { desc: '2', label: 'Last 3M', selected: false, key: '3' },
  ];
  function formatNumberToMillions(number: any) {
    return (number / 1000000).toFixed(0) + 'M';
  }

  const CustomTickLabel = (props: any) => {
    const { x, text } = props;
    const splitText = text.split(' ');
    return (
      <View style={{ position: 'absolute', left: x, top: -20 }}>
        {splitText.map((split: any, index: any) => (
          <Text key={index} style={{ color: colors.secondaryText, fontSize: 11 }}>
            {split}
          </Text>
        ))}
      </View>
    );
  };
  const barColors = [colors.elektricBlueDk, colors.brightNavyDk, colors.darkBlueGreyDk];
  const profitMargin = -68.48;
  const getProfitMarginColor = () => {
    return profitMargin < 0 ? colors.redPrice : colors.primaryText;
  };

  return (
    <View>
      <SecondaryTabs data={tabData} zeroSelected={false} isSelected={isSelected} setIsSelected={setIsSelected} />{' '}
      <Text marginT-20 body2 primaryText>
        Profit margin: <Text style={{ color: getProfitMarginColor() }}> {profitMargin} %</Text>
      </Text>
      <View style={styles(colors).chartContainer}>
        <VictoryChart marginT-20 height={280}>
          <VictoryAxis
            tickFormat={x => {
              return x.toLocaleString(language, { month: 'short', year: 'numeric' });
            }}
            style={{
              axis: { stroke: colors.white20 },
              ticks: { stroke: 'none' },
            }}
            tickLabelComponent={<CustomTickLabel />}
          />
          <VictoryAxis
            dependentAxis
            orientation="right"
            tickFormat={formatNumberToMillions}
            style={{
              axis: { stroke: 'none' },
              ticks: { stroke: 'none' },
              tickLabels: {
                fill: colors.secondaryText,
                fontSize: 11,
              },
            }}
          />
          <VictoryGroup offset={13} colorScale={barColors}>
            <VictoryBar data={data} x="date" y="sales" barWidth={12} />
            <VictoryBar data={data} x="date" y="profit" barWidth={12} />
            <VictoryBar data={data} x="date" y="netProfit" barWidth={12} />
          </VictoryGroup>
        </VictoryChart>
      </View>
      <View marginT-40>
        <View height={40} row paddingL-10 paddingR-10>
          <View style={styles(colors).dotContainer} row flex-1>
            <View style={[styles(colors).dot, styles(colors).bar1]} />
            <Text primaryText marginL-20 flex-1>
              {t('Sales Revenue')}
            </Text>
          </View>
        </View>
        <View height={40} row paddingL-10 paddingR-10>
          <View style={styles(colors).dotContainer} row flex-1>
            <View style={[styles(colors).dot, styles(colors).bar2]} />
            <Text primaryText marginL-20 flex-1>
              {t('Core Operating Profit(loss)')}
            </Text>
          </View>
        </View>
        <View height={40} row paddingL-10 paddingR-10>
          <View style={styles(colors).dotContainer} row flex-1>
            <View style={[styles(colors).dot, styles(colors).bar3]} />
            <Text primaryText marginL-20 flex-1>
              {t('Net Profit(loss)')}
            </Text>
          </View>
        </View>
      </View>
    </View>
  );
}

const styles = (colors: any) =>
  StyleSheet.create({
    tabs: { paddingVertical: 3, marginTop: 20 },
    topBorder: {
      borderTopWidth: 1,
      borderColor: colors.white20,
      marginTop: 10,
      alignItems: 'center',
    },
    chartContainer: {
      marginLeft: -30,
    },
    dotContainer: {
      alignItems: 'center',
    },
    dot: {
      width: 12,
      height: 12,
      borderRadius: 6,
      alignItems: 'center',
    },
    bar1: {
      backgroundColor: colors.elektricBlueDk,
    },
    bar2: {
      backgroundColor: colors.brightNavyDk,
    },
    bar3: {
      backgroundColor: colors.darkBlueGreyDk,
    },
    sumText: {
      fontSize: 12,
    },
  });