Untitled

import React, { memo } from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import { View, Text, Colors, TouchableOpacity } from 'react-native-ui-lib';
import LinearGradient from 'react-native-linear-gradient';

import Icon from '../Icon';
import { formatCurrency, formattedByLanguage } from '../../../utils/formatCurrency';
import { useColors } from '../../../hooks';
import i18n from '../../../translations';

const WIDTH = Dimensions.get('window').width - (24 + 16 + 8);
const HEIGHT = '100%';

export const TotalCard = memo(({ onHiddenBalance, toggleHiddenBalance, item, theme }) => {
  const { potProfit, ratio, totalValue, instrument, accountExtId } = item;
  const formattedCurrency = formattedByLanguage(i18n, totalValue);
  const currencyParts = formattedCurrency.split(i18n?.language === 'tr' ? ',' : '.');

  const { colors } = useColors();

  const getPriceColor = price => {
    if (price === 0) {
      return colors.secondaryText;
    } else if (price < 0) {
      return colors.redPrice;
    } else {
      return colors.greenPrice;
    }
  };

  const getIconName = ratio => {
    if (ratio === 0) {
      return 'square';
    } else if (ratio < 0) {
      return 'down';
    } else {
      return 'up';
    }
  };

  const renderBalance = () => (
    <>
      <View row>
        <Text digits1 marginB-4 color={colors.primaryText}>
          {currencyParts[0]}
        </Text>
        <Text digits1 marginB-4 color={colors.secondaryText}>
          {`${i18n?.language === 'tr' ? ',' : '.'}${currencyParts[1]} TL`}
        </Text>
      </View>
      <View row centerV>
        <Text digits3 color={getPriceColor(potProfit)}>
          {`${formattedByLanguage(i18n, potProfit)} TL`}
        </Text>
        <Icon name={getIconName(ratio)} width={8} height={7} style={styles.upIcon} />
        <Text digits3 color={getPriceColor(ratio)}>
          {formattedByLanguage(i18n, ratio)}%
        </Text>
      </View>
    </>
  );
  return (
    <View style={[styles.container, { height: HEIGHT }]} marginL-16 paddingL-16>
      <LinearGradient
        colors={theme === 'dark' ? [Colors.secondaryBgStartLight, Colors.cardBgEndDark] : [Colors.white, Colors.white]}
        start={{ x: 0, y: 0 }}
        end={{ x: 0.5, y: 2.5 }}
        style={[styles.container, { position: 'absolute', height: HEIGHT }]}
      />
      <View marginT-8>
        <View row marginB-4>
          <View centerV flex row>
            <Text heading5 color={colors.primaryText}>
              {i18n.language === 'en' ? (instrument === 'VIOP' ? 'Future' : instrument) : instrument}
            </Text>
            <Text body1 marginH-2 color={colors.secondaryText}>
              •
            </Text>
            <Text body2 color={colors.secondaryText}>
              {accountExtId}
            </Text>
          </View>
          <TouchableOpacity
            center
            style={[styles.eyeIcon, { display: !onHiddenBalance ? 'flex' : 'none' }]}
            onPress={toggleHiddenBalance}>
            <Icon name="eye" width={22} height={16} fill={theme === 'dark' ? Colors.primaryText : colors.action} />
          </TouchableOpacity>
          <TouchableOpacity
            center
            style={[styles.eyeIcon, { display: onHiddenBalance ? 'flex' : 'none' }]}
            onPress={toggleHiddenBalance}>
            <Icon name="eyeClose" width={22} height={16} fill={theme === 'dark' ? Colors.primaryText : colors.action} />
          </TouchableOpacity>
        </View>
        {!onHiddenBalance && renderBalance()}
      </View>
    </View>
  );
});

const styles = StyleSheet.create({
  container: {
    borderRadius: 8,
    width: WIDTH,
  },
  upIcon: {
    marginLeft: 16,
    marginRight: 8,
  },
  eyeIcon: {
    width: 24,
    height: 24,
    paddingHorizontal: 32,
  },
});