import {ScrollView, StyleSheet, View} from "react-native";
import DText from "../../components/DText/DText";
import {responsiveFontSize, responsiveHeight} from "react-native-responsive-dimensions";
import {gray} from "../../css/colors";
import {BalanceTransaction} from "../../types/balance";
import {FC} from "react";
import {RFPercentage} from "react-native-responsive-fontsize";
import {FlashList} from "@shopify/flash-list";
import flashListSeparator from "../../components/FlashListSeparator/FlashListSeparator";
import {formatBalanceNumber} from "../../utils/formatters";

type TransactionElementProps = {
    transaction: BalanceTransaction;
}
const TransactionElement: FC<TransactionElementProps> = ({transaction}) => {

    return (
        <View style={styles.historyElementContainer}>
            <DText style={{
                fontSize: responsiveFontSize(2),
                fontWeight: "500"
            }}>{formatBalanceNumber(transaction.amount)} руб</DText>
            <DText style={{
                fontSize: responsiveFontSize(1.5),
                color: gray,
                fontWeight: "400"
            }}>{transaction.description}</DText>
        </View>
    )
}

type TransactionsViewProps = {
    transactions: BalanceTransaction[];
    onEndReached: () => void;
    onRefresh: () => void;
    isLoading: boolean;
}
const TransactionsView: FC<TransactionsViewProps> = ({transactions, isLoading, onEndReached, onRefresh}) => {
    return (
        <FlashList
            onRefresh={onRefresh}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            ItemSeparatorComponent={flashListSeparator}
            data={transactions}
            keyExtractor={item => item.id.toString()}
            keyboardShouldPersistTaps={"never"}
            onEndReachedThreshold={0.5}
            estimatedItemSize={100}
            renderItem={item =>
                <TransactionElement
                    transaction={item.item}
                />}
            onEndReached={onEndReached}
            refreshing={isLoading}
        >
        </FlashList>
    )
}

const styles = StyleSheet.create({
    historyElementContainer: {
        width: "100%",
        backgroundColor: "white",
        borderRadius: RFPercentage(2),
        padding: RFPercentage(2),
        elevation: 1
    },
    historyElementsContainer: {
        rowGap: responsiveHeight(2),
    },
})

export default TransactionsView;