import React, {useState} from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';
import {ScreenParams, CommonScreenProps} from '../navigation/app';
import {
  Colors,
  globalStyles,
  ms,
  wp,
} from '../utils';
import Header from '../components/Header';
import TransactionsList from '../components/TransactionsList';

type Props = CommonScreenProps & {
  params: ScreenParams['history'];
};

const History = ({params, navigate, goBack, isInitialScreen}: Props) => {

  return (
    <>
      <StatusBar
        backgroundColor={Colors.white}
        barStyle={'dark-content'}
        animated={false}
      />
      <SafeAreaView style={[globalStyles.appContainer]}>
        <Header
          headerText={'History'}
          containerStyle={{
            paddingBottom: ms(10),
            paddingTop: ms(4),
            borderBottomWidth: ms(1),
            borderBottomColor: Colors.headerBottomColor,
          }}
          onPressBack={() => {
            goBack();
          }}
          headerChild={<View style={{flex: 0.125}} />}
        />
        <View style={{flex: 1, paddingHorizontal: wp(10), paddingTop: ms(14)}}>
          <TransactionsList
            savingsId={params?.planId || ''}
            recordsPerPage={10}
            showScrollIndicator={true}
            contentContainerStyle={{
              paddingHorizontal: wp(10),
            }}
            scrollEnabled={true}
            showTabs={true}
          />
        </View>
      </SafeAreaView>
    </>
  );
};

export default History;

const styles = StyleSheet.create({});