import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../pages/navigations/home';
import Message from '../pages/navigations/message';
import Wallet from '../pages/navigations/wallet';
import NFTs from '../pages/navigations/NFTs';
import Me from '../pages/navigations/me';
import { Image, Text } from 'react-native';
import { SvgXml } from 'react-native-svg';
import TabIcon from './../static/img/tab';

const Tab = createBottomTabNavigator();
// const HomeStack = createNativeStackNavigator();
export const NavTabScreen = () => {
	return (
		<Tab.Navigator
			initialRouteName="Twitter"
			options={{
				tabBarActiveTintColor: '#1D9BF0',
				tabBarInactiveTintColor: '#b1b1b1',
			}}>
			<Tab.Screen
				options={{
					headerShown: false,
					tabBarIcon: ({ focused }) => {
						return !!focused ? (
							<SvgXml
								width="20"
								height="20"
								xml={TabIcon.homeSvgActive}
							/>
						) : (
							<SvgXml
								width="20"
								height="20"
								xml={TabIcon.homeSvg}
							/>
						);
					},
				}}
				name="Home"
				component={Home}
			/>
			<Tab.Screen
				name="Message"
				options={{
					tabBarIcon: ({ focused }) => {
						return !!focused ? (
							<SvgXml
								width="20"
								height="20"
								xml={TabIcon.messageSvgActive}
							/>
						) : (
							<SvgXml
								width="20"
								height="20"
								xml={TabIcon.messageSvg}
							/>
						);
					},
				}}
				component={Message}
			/>
			<Tab.Screen
				name="Wallet"
				options={{
					tabBarIcon: ({ focused }) => {
						return !!focused ? (
							<SvgXml
								width="20"
								height="20"
								xml={TabIcon.walletSvgActive}
							/>
						) : (
							<SvgXml
								width="20"
								height="20"
								xml={TabIcon.walletSvg}
							/>
						);
					},
				}}
				component={Wallet}
			/>
			<Tab.Screen
				name="NFTs"
				options={{
					tabBarIcon: ({ focused }) => {
						return !!focused ? (
							<SvgXml
								width="20"
								height="20"
								xml={TabIcon.nftsSvgActive}
							/>
						) : (
							<SvgXml
								width="20"
								height="20"
								xml={TabIcon.nftsSvg}
							/>
						);
					},
				}}
				component={NFTs}
			/>
			<Tab.Screen
				name="Me"
				options={{
					tabBarIcon: ({ focused }) => {
						return !!focused ? (
							<SvgXml
								width="20"
								height="20"
								xml={TabIcon.meSvgActive}
							/>
						) : (
							<SvgXml
								width="20"
								height="20"
								xml={TabIcon.meSvg}
							/>
						);
					},
				}}
				component={Me}
			/>
		</Tab.Navigator>
	);
};
