import React from 'react';
import { Text } from 'react-native';
import { Container } from 'native-base';
import { connect } from "react-redux";
import { Tabs } from '../../components/tab';
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()
	}

	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>
		)
	}

	sceneMap = () => {
		const listofTabs = {
			first: () => <Tab1 navigation={this.props} />,
			second: () => <Tab2 navigation={this.props} />,
			third: () => <Tab3 navigation={this.props} />
		}

		return listofTabs;
	}

	routes = () => {
		const listofTabBar = [
			{ key: 'first', title: 'Profile', activeIcon: "activeaccount", inActiveIcon: "inactiveaccount" },
			{ key: 'second', title: 'My Card', activeIcon: "activecard", inActiveIcon: "inactivecard" },
			{ key: 'third', title: 'Transactions', activeIcon: "activehistory", inActiveIcon: "history" },
		];

		return listofTabBar
	}

	render() {
		const { tab } = this.props.route.params;

		return (
			<CustomSafeArea>
				<CustomHeader title="My Profile" onBackPress={() => this.props.navigation.goBack()} menu={false} navigation={this.props} />
				<Container style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.colors.background }}>
					<Tabs tab={tab} renderScene={this.sceneMap()} routes={this.routes()}/>
				</Container>
			</CustomSafeArea>
		)
	}
}

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

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