import React from 'react';
import { SafeAreaView } from 'react-native';
import { Container, Tab, Tabs, TabHeading, Text } from 'native-base';
import { connect } from "react-redux";
import CustomHeader from '../../components/header.js';
import Elements from '../../components/elements.js';
import Theme from '../../components/theme.style';
import Tab1 from './profile/profile';
import Tab2 from './card';
import Tab3 from './transaction/transaction';
import CustomSafeArea from '../../components/safeArea.component.js';

class MyProfile extends React.PureComponent {

	constructor(props) {
		super(props)
	}

	state = {
		px: 0,
		pg: null
	}

	componentDidMount() {
		this.init()
	}

	componentWillUnmount() {

	}

	init = async () => {
		let t = this.props.route.params && this.props.route.params.tab ? this.props.route.params.tab : ''
		let x = 0
		if(t == 'ProfileCardTab') x = 1
		else if(t == 'ProfileTransactionsTab') x = 2
		this.setState({ pg: x })
	}

	TabHead = (title, icon) => {
		return (
			<TabHeading textStyle={{color: 'red'}} style={{flexDirection: 'column', padding: 15, backgroundColor: Theme.colors.primary}}>
				<Elements.icon name={icon} size={25} />
				<Text style={{fontSize: 13, padding: 5, color: Theme.colors.lightGray, fontFamily: 'Arial'}}>{title}</Text>
			</TabHeading>
		)
	}

	render() {
		return (
			<CustomSafeArea>
				<CustomHeader title="My Profile" onBackPress={() => this.props.navigation.goBack()} menu={false} navigation={this.props} />
				<Container style={{ backgroundColor: this.props.app_theme?.theme.colors.background }}>
					<Tabs 
						tabBarUnderlineStyle={{backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.white}} 
						tabContainerStyle={{height: 60}} 
						initialPage={this.props.route.params.tab}
						onChangeTab={(tab) => {
							this.setState({ pg: tab.i })
						}}>
						<Tab heading={this.TabHead("Profile", this.state.pg == 0 ? "activeaccount" : "inactiveaccount")}>
							<Tab1 navigation={this.props} />
						</Tab>
						<Tab heading={this.TabHead("My Card", this.state.pg == 1 ? "activecard" : "inactivecard")}>
							<Tab2 navigation={this.props} />
						</Tab>
						<Tab heading={this.TabHead("Transaction", this.state.pg == 2 ? "activehistory" : "history")}>
							<Tab3 navigation={this.props} />
						</Tab>
					</Tabs>
				</Container>
			</CustomSafeArea>
		)
	}
}

const mapStateToProps = (state) => {
	return {
	  app_theme: state.appThemeReducer.theme
	}
}

export default connect(mapStateToProps, null)(MyProfile);