Untitled

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

export function CurrencyChart() {
  const { colors }: any = useColors();

  const data = [
    { x: 'June 2021', domestic: 10000000, foreign: 11000000, netForeign: 4000000 },
    { x: 'Sep 2021', domestic: 14000000, foreign: 9000000, netForeign: 4000000 },
    { x: 'Dec 2021', domestic: 20000000, foreign: 12000000, netForeign: 6000000 },
    { x: 'Mar 2022', domestic: 9000000, foreign: 13000000, netForeign: 5000000 },
  ];
  const [isSelected, setIsSelected] = useState<string[] | string>([]);

  const bottomTabs: any[] = [
    { desc: '1', label: 'June 2021', selected: true, key: '1' },
    { desc: '1', label: 'Sep 2021', selected: false, key: '2' },
    { desc: '1', label: 'Dec 2021', selected: false, key: '3' },
    { desc: '1', label: 'Mar 2022', selected: false, key: '4' },
  ];

  const CustomTickLabel = (props: any) => {
    const { x, text } = props;
    const splitText = text.split(' ');

    return (
      <View style={{ position: 'absolute', left: x, top: -60 }}>
        {splitText.map((split: any, index: any) => (
          <Text key={index} style={{ color: colors.secondaryText, fontSize: 11 }}>
            {split}
          </Text>
        ))}
      </View>
    );
  };

  function formatNumberToMillions(number: any) {
    return (number / 1000000).toFixed(0) + 'M';
  }

  const domesticTotal = data.reduce((total, item) => total + item.domestic, 0);
  const foreignTotal = data.reduce((total, item) => total + item.foreign, 0);
  const netForeignTotal = data.reduce((total, item) => total + item.netForeign, 0);
  function formatNumberWithCommas(number: any) {
    return number.toLocaleString();
  }

  return (
    <View>
      <View style={styles(colors).chartContainer}>
        <VictoryChart marginT-20>
          <VictoryAxis
            tickFormat={() => ''}
            style={{
              axis: { stroke: 'none' },
              ticks: { stroke: 'none' },
            }}
          />
          <VictoryAxis
            dependentAxis
            orientation="right"
            tickFormat={formatNumberToMillions}
            style={{
              axis: { stroke: 'none' },
              ticks: { stroke: 'none' },
              tickLabels: {
                fill: colors.secondaryText,
                fontSize: 11,
              },
            }}
          />
          <VictoryArea
            interpolation="natural"
            data={data}
            x="x"
            y="domestic"
            style={{ data: { fill: colors.middleGreenDarkCl, fillOpacity: 0.2, strokeWidth: 2 } }}
            dataComponent={
              <GradientArea
                gradientColorStops={[
                  { color: colors.middleGreenDarkCl },
                  { offset: 0.8, color: 'transparent', stopOpacity: 0.2 },
                ]}
                gradientStrokeStops={[{ color: colors.middleGreenDarkCl }]}
                strokeWidth={2}
              />
            }
          />
          <VictoryArea
            interpolation="natural"
            data={data}
            x="x"
            y="foreign"
            style={{ data: { fill: colors.malibuDarkCl, fillOpacity: 0.2, strokeWidth: 2 } }}
            dataComponent={
              <GradientArea
                gradientColorStops={[
                  { color: colors.malibuDarkCl },
                  { offset: 0.8, color: 'transparent', stopOpacity: 0.2 },
                ]}
                gradientStrokeStops={[{ color: colors.malibuDarkCl }]}
                strokeWidth={2}
              />
            }
          />
          <VictoryArea
            interpolation="natural"
            data={data}
            x="x"
            y="netForeign"
            style={{ data: { fill: colors.lavenderDarkCl, fillOpacity: 0.2, strokeWidth: 2 } }}
            dataComponent={
              <GradientArea
                gradientColorStops={[
                  { color: colors.lavenderDarkCl },
                  { offset: 0.8, color: 'transparent', stopOpacity: 0.2 },
                ]}
                gradientStrokeStops={[{ color: colors.lavenderDarkCl }]}
                strokeWidth={2}
              />
            }
          />
        </VictoryChart>
        <View style={styles(colors).xAxisTickContainer}>
          {data.map((point, index) => (
            <CustomTickLabel key={index} x={(index * 100) / (data.length - 1)} text={point.x} />
          ))}
        </View>
      </View>
      <View style={styles(colors).topBorder} row>
        <SecondaryTabs
          extraStyle={styles(colors).tabs}
          data={bottomTabs}
          fillScreen
          zeroSelected={false}
          isSelected={isSelected}
          setIsSelected={setIsSelected}
        />
      </View>
      <View marginT-20>
        <View height={40} style={styles(colors).viewBg} row paddingL-10 paddingR-10>
          <View style={styles(colors).dotContainer} row flex-1>
            <View style={[styles(colors).dot, styles(colors).greenStyle]} />
            <Text primaryText marginL-20 flex-1>
              Domestic Sales
            </Text>
            <Text primaryText flex-0 style={styles(colors).sumText}>
              {formatNumberWithCommas(domesticTotal)}
            </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).blueStyle]} />
            <Text primaryText marginL-20 flex-1>
              Foreign Sales
            </Text>
            <Text primaryText flex-0 style={styles(colors).sumText}>
              {formatNumberWithCommas(foreignTotal)}
            </Text>
          </View>
        </View>
        <View height={40} style={styles(colors).viewBg} row paddingL-10 paddingR-10>
          <View style={styles(colors).dotContainer} row flex-1>
            <View style={[styles(colors).dot, styles(colors).purpleStyle]} />
            <Text primaryText marginL-20 flex-1>
              Net Foreign Currency
            </Text>
            <Text primaryText flex-0 style={styles(colors).sumText}>
              {formatNumberWithCommas(netForeignTotal)}
            </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,
      justifyContent: 'center',
      alignItems: 'center',
    },
    dotContainer: {
      alignItems: 'center',
    },
    dot: {
      width: 12,
      height: 12,
      borderRadius: 6,
      alignItems: 'center',
    },
    greenStyle: {
      backgroundColor: colors.middleGreenDarkCl,
    },
    blueStyle: {
      backgroundColor: colors.malibuDarkCl,
    },
    purpleStyle: {
      backgroundColor: colors.lavenderDarkCl,
    },
    viewBg: {
      backgroundColor: colors.blockBg4DarkCl,
    },
    sumText: {
      fontSize: 12,
    },
    xAxisTickContainer: {
      flexDirection: 'row',
      paddingHorizontal: 50,
    },
  });