/**
 * 历史交易页面
 * @邠心vbe on 2024/05/16
 */
import React, { Component, useState } from 'react';
import { ScrollView, StyleSheet, RefreshControl } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import HistoryList from './HistoryList';
import OverviewV2 from '../wallet/OverviewV2';
import PointsHistory from './PointsHistory';
import app from '../../../app.json';
import { MyRefreshProps } from '../../components/ThemesConfig';

const TabOverView = () => {
  const [refresh, setRefresh] = useState(false)
  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={$padding(16,0)}
      refreshControl={
        <RefreshControl
          {...MyRefreshProps()}
          refreshing={refresh}
          onRefresh={() => setRefresh(true)}
        />
      }>
      <OverviewV2
        atAglance={false}
        skeleton={false}
        refresh={refresh}
        isTabPage={true}
        refreshed={() => setRefresh(false)}
        shown={true}/>
    </ScrollView>
  )
}

export default class Transaction extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageAdapter: [{
        title: $t('wallet.tabOverview'),
        name: "Overview",
        component: TabOverView
      },{
        title: $t('wallet.tabHistory'),
        name: "History",
        component: HistoryList
      },{
        title: $t('points.points'),
        name: "Points",
        component: PointsHistory
      }]
    };
    this.tabBarStyle = {
      tabBarStyle: styles.tabStyle,
      tabBarPressColor: rippleColor,
      tabBarScrollEnabled: false,
      tabBarIndicatorStyle: styles.indicator,
      tabBarActiveTintColor: tabBarTextActive,
      tabBarInactiveTintColor: tabBarTextInactive
    }
  }

  backPage() {
    startPage(PageList.home);
    return true;
  }

  render() {
    const Tab = createMaterialTopTabNavigator();
    return (
      <Tab.Navigator
        style={styles.container}
          screenOptions={{
            lazy: false,
            lazyPreloadDistance: 1,
            ...this.tabBarStyle
          }}
          backBehavior={() => this.backPage()}>
        { this.state.pageAdapter.map((item, index) => 
          <Tab.Screen
            key={index}
            name={item.name}
            component={item.component}
            options={{
              title: item.title,
              tabBarAllowFontScaling: false
            }}
          />
        )}
      </Tab.Navigator>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colorLight
  },
  tabStyle: {
    backgroundColor: app.isWhitelabel ? colorLight : colorPrimary
  },
  indicator: {
    backgroundColor: app.isWhitelabel ? colorPrimary : colorLight
  }
})