import React from 'react';
import {useState, useEffect} from 'react';
import {SafeAreaView, View} from 'react-native';
import { Container, Header, Tab, Tabs, TabHeading, Icon, Text } from 'native-base';
import CustomHeader from '../../components/header.js';
import Elements from '../../components/elements.js';
import Theme from '../../components/theme.style';
import Tab1 from './lubes.js';
import Tab2 from './fuels.js';
import Tab3 from './asphalt.js';

export default function MyProfile(props) {

	const [loaded, setloaded] = useState(0)

  return (
  	<SafeAreaView style={{flex: 1}}>
		  <Elements.loader visible={loaded != 0 ? false : true} />
      <CustomHeader title="Products" onBackPress={() => {
				props.navigation.reset({
					index: 0,
					routes: [{name: 'Main'}],
				});
			}} menu={false} navigation={props} />
      <Container>
				<Tabs 
					tabBarUnderlineStyle={{backgroundColor: "#fff"}} 
					tabContainerStyle={{backgroundColor: Theme.colors.primary}} 
					initialPage={0}
				>
					<Tab 
						heading="Lubricants" 
						tabStyle={{backgroundColor: Theme.colors.primary}}
						activeTabStyle={{backgroundColor: Theme.colors.primary}}
						textStyle={{color: Theme.colors.lightGray}}
						activeTextStyle={{color: "#fff"}}
					>
            <Tab1 navigation={props} onLoaded={() => setloaded(1)} />
          </Tab>
					<Tab 
						heading="Fuels"
						tabStyle={{backgroundColor: Theme.colors.primary}}
						activeTabStyle={{backgroundColor: Theme.colors.primary}}
						textStyle={{color: Theme.colors.lightGray}}
						activeTextStyle={{color: "#fff"}}
					>
            <Tab2 navigation={props} onLoaded={() => setloaded(2)} />
          </Tab>
					<Tab 
						heading="Asphalt"
						tabStyle={{backgroundColor: Theme.colors.primary}}
						activeTabStyle={{backgroundColor: Theme.colors.primary}}
						textStyle={{color: Theme.colors.lightGray}}
						activeTextStyle={{color: "#fff"}}
					>
            <Tab3 navigation={props} onLoaded={() => setloaded(3)} />
          </Tab>
        </Tabs>
      </Container>
    </SafeAreaView>
  );
}