/**
 * 代金券页面适配器
 * @邠心vbe on 2024/04/09
 */
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import ListPoints from './ListPoints';
import ListVoucher from './ListVoucher';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import app from '../../../app.json';
import { PageList } from '../Router';

export default class VoucherPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageAdapter: [{
        title: $t('voucher.tabPoints'),
        name: "Deals",
        component: ListPoints
      },{
        title: $t('voucher.tabVoucher'),
        name: "Vouchers",
        component: ListVoucher
      }]
    };
    this.tabBarStyle = {
      tabBarStyle: styles.tabStyle,
      tabBarPressColor: rippleColor,
      tabBarScrollEnabled: false,
      tabBarIndicatorStyle: styles.indicator,
      tabBarActiveTintColor: tabBarTextActive,
      tabBarInactiveTintColor: tabBarTextInactive
    }
    this.isHide = false;
  }

  backPage() {
    if (!this.isHide) {
      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: pageBackground
  },
  tabStyle: {
    backgroundColor: app.isWhitelabel ? colorLight : colorPrimary
  },
  indicator: {
    backgroundColor: app.isWhitelabel ? colorPrimary : colorLight
  }
})