import React, { useEffect, useState } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { View, Text } from 'react-native-ui-lib';
import { Icon } from '../../../components/ui';
import { FinancialsChart } from '../../../components/business/Chart';
import { useNavigation } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../../hooks';
import { GetCompanyCategory, GetMarketBalance } from '../../../api/user';
import ModalController from '../../../components/Modal/ModalController';
export const BalanceSheet = ({ symbolCode }: any) => {
const navigation = useNavigation();
const { t } = useTranslation();
const { colors }: any = useColors();
const [selectedCurrency, setSelectedCurrency] = useState('TRY');
const currencyOptions = ['TRY', 'USD', 'EURO'];
const [showOptions, setShowOptions] = useState(false);
const [percentageName, setPercentageName] = useState('Özkaynakların Varlıklara Oranı');
const [label1, setLabel1] = useState('Net Nakit');
const [label2, setLabel2] = useState('Toplam Özkaynaklar');
const [label3, setLabel3] = useState('Toplam Varlıklar');
const dataBalance: any = [];
const { mutate: getMarketBalance, data: marketBalanceData } = GetMarketBalance();
const { mutate: getCompanyCategory, data: marketCompanyCategory } = GetCompanyCategory();
useEffect(() => {
getMarketBalance({
company: symbolCode,
inputType: '1',
});
getCompanyCategory({
company: symbolCode,
});
}, [symbolCode]);
function findDataByLabel(label: any) {
return marketBalanceData?.data?.data?.companyFinancialReportRowList?.find((item: any) => item.label === label);
}
const dates: any = marketBalanceData?.data?.data?.companyFinancialReportPeriodList
.slice(0, 5)
.map((item: any) => item.year);
const handleSelect = (currency: any) => {
setSelectedCurrency(currency);
setShowOptions(false);
};
const symbolCategory = marketCompanyCategory?.data?.data?.kategori;
const percentage = (
findDataByLabel('TOPLAM ÖZKAYNAKLAR')?.values?.[0] / findDataByLabel('TOPLAM VARLIKLAR')?.values?.[0]
).toFixed(2);
if (symbolCategory === 'Standart') {
if (marketBalanceData) {
const currencyKey = {
USD: 'usdValues',
EURO: 'eurValues',
TRY: 'values',
}[selectedCurrency];
if (currencyKey) {
let value1Sum = 0;
for (let i = 0; i < 5; i++) {
const value1 =
findDataByLabel('Nakit ve Nakit Benzerleri')?.[currencyKey]?.[i] +
findDataByLabel('Finansal Yatırımlar')?.[currencyKey]?.[i] -
findDataByLabel('Kısa Vadeli Borçlanmalar')?.[currencyKey]?.[i] -
findDataByLabel('Uzun Vadeli Borçlanmalar')?.[currencyKey]?.[i];
const value2 = findDataByLabel('TOPLAM ÖZKAYNAKLAR')?.[currencyKey]?.[i];
const value3 = findDataByLabel('TOPLAM VARLIKLAR')?.[currencyKey]?.[i];
value1Sum += value1;
dataBalance.push({ value1, value2, value3 });
}
}
}
} else if (symbolCategory === 'Leasing') {
if (marketBalanceData) {
const currencyKey = {
USD: 'usdValues',
EURO: 'eurValues',
TRY: 'values',
}[selectedCurrency];
if (currencyKey) {
for (let i = 0; i < 5; i++) {
const value1 = findDataByLabel('İTFA EDİLMİŞ MALİYETİ İLE ÖLÇÜLEN FİNANSAL VARLIKLAR (Net)')?.[currencyKey]?.[
i
];
const value2 = findDataByLabel('VARLIKLAR TOPLAMI')?.[currencyKey]?.[i];
const value3 = findDataByLabel('ÖZKAYNAKLAR')?.[currencyKey]?.[i];
dataBalance.push({ value1, value2, value3 });
}
}
}
} else if (symbolCategory === 'Sigorta') {
if (marketBalanceData) {
const currencyKey = {
USD: 'usdValues',
EURO: 'eurValues',
TRY: 'values',
}[selectedCurrency];
if (currencyKey) {
for (let i = 0; i < 5; i++) {
const value1 = findDataByLabel('Toplam Varlıklar')?.[currencyKey]?.[i];
const value2 = findDataByLabel('TOPLAM YÜKÜMLÜLÜKLER')?.[currencyKey]?.[i];
const value3 = findDataByLabel('Özsermaye Toplamı')?.[currencyKey]?.[i];
dataBalance.push({ value1, value2, value3 });
}
}
}
} else {
if (marketBalanceData) {
const currencyKey = {
USD: 'usdValues',
EURO: 'eurValues',
TRY: 'values',
}[selectedCurrency];
if (currencyKey) {
for (let i = 0; i < 5; i++) {
const value1 = findDataByLabel('AKTİFLER TOPLAMI')?.[currencyKey]?.[i];
const value2 = findDataByLabel('ÖZKAYNAKLAR TOPLAMI')?.[currencyKey]?.[i];
const value3 = findDataByLabel('Krediler')?.[currencyKey]?.[i];
dataBalance.push({ value1, value2, value3 });
}
}
}
}
const renderCurrencyOptions = () => {
return (
<>
{currencyOptions.map((currency, index) => {
if (currency !== selectedCurrency) {
return (
<TouchableOpacity key={index} onPress={() => handleSelect(currency)}>
<Text>{currency}</Text>
</TouchableOpacity>
);
}
return null;
})}
</>
);
};
const filterRow = (selectedItem: any, isOpen: any, renderDropdownItems: any, toggleDropdown: any) => {
return (
<View>
<TouchableOpacity onPress={toggleDropdown}>
<View row width={50}>
<View row center flex-1>
<Text marginL-10>{selectedItem}</Text>
<Icon
name="downArrow"
width={10}
height={6}
fill={colors.secondaryText}
style={styles(colors).iconStyle}
/>
</View>
</View>
</TouchableOpacity>
<View>{isOpen && renderDropdownItems()}</View>
</View>
);
};
return (
<>
<View marginT-20 style={styles(colors).cardStyle}>
<View margin-20>
<View row marginB-16>
<Text flex-1 style={styles(colors).fWeight500} primaryText>
{t('balanceSheet')}
</Text>
{filterRow(selectedCurrency, showOptions, renderCurrencyOptions, () => {
ModalController.showModal({
type: 'currencyFilter',
externalHeight: 780,
props: {
onSelectCurrency: handleSelect,
},
});
})}
</View>
<FinancialsChart
data={dataBalance}
chartType={'balance'}
tabsSelected={false}
percentage={percentage}
percentageName={percentageName}
financialLabels={[label1, label2, label3]}
dates={dates}
/>
</View>
<TouchableOpacity
marginL-10
onPress={() =>
navigation.navigate('financialChartDetail' as never, {
chartTitle: 'balanceSheet',
symbolCode,
marketBalanceData,
})
}>
<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>
</>
);
};
const styles = (colors: any) =>
StyleSheet.create({
textColor: {
color: colors.action,
fontSize: 12,
marginBottom: 20,
marginLeft: 20,
},
arrowStyle: {
marginLeft: 10,
marginTop: 3,
},
cardStyle: {
backgroundColor: colors.donutChartBg,
borderRadius: 8,
},
fWeight500: {
fontWeight: '500',
},
iconStyle: {
marginHorizontal: 6,
marginVertical: 8,
},
});