import React, { Component } from 'react';
import { Dimensions, Platform } from 'react-native';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';

import AppHeader from './components/AppHeader/AppHeader.container.js';

import Auction from './screens/Auction.container.js';
import Checkout from './screens/Checkout.js';
import Event from './screens/Event.container.js';
import Events from './screens/Events.container.js';
import ImageDetail from './screens/ImageDetail.js';
import Item from './screens/Item.js';
import Marketplace from './screens/Marketplace.js';
import Profile from './screens/Profile.container.js';
import Register from './screens/Register.container.js';
import SignInOrRegister from './screens/SignInOrRegister.js';

const tabBarVisibility = ({ navigation }) => {
    let tabBarVisible = true;
    if (navigation.state.index > 0) {
        tabBarVisible = false;
    }

    return {
        tabBarVisible,
    };
};

export const SignInOrRegisterStack = createStackNavigator({
    SignInOrRegister: {
        screen: SignInOrRegister,
        navigationOptions: ({ navigation }) => ({
            header: null,
            tabBarVisible: false,
            gesturesEnabled: false,
        }),
    },
    Register: {
        screen: Register,
        navigationOptions: ({ navigation }) => ({
            header: null,
            tabBarVisible: false,
            gesturesEnabled: false,
        }),
    },
});

SignInOrRegisterStack.navigationOptions = tabBarVisibility;

export const ProfileStack = createStackNavigator({
    Profile: {
        screen: Profile,
        navigationOptions: ({ navigation }) => ({
            header: <AppHeader navigation={navigation} />,
        }),
    },
    SignInOrRegister: {
        screen: SignInOrRegister,
        navigationOptions: ({ navigation }) => ({
            header: null,
            gesturesEnabled: false,
        }),
    },
    Register: {
        screen: Register,
        navigationOptions: ({ navigation }) => ({
            header: null,
            gesturesEnabled: false,
        }),
    },
});

ProfileStack.navigationOptions = tabBarVisibility;

export const AuctionStack = createStackNavigator({
    Auction: {
        screen: Auction,
        navigationOptions: ({ navigation }) => ({
            header: <AppHeader navigation={navigation} />,
        }),
    },
    Item: {
        screen: Item,
        navigationOptions: ({ navigation }) => ({
            header: null,
            tabBarVisible: false,
            gesturesEnabled: false,
        }),
    },
    ImageDetail: {
        screen: ImageDetail,
        navigationOptions: ({ navigation }) => ({
            header: null,
            tabBarVisible: false,
            gesturesEnabled: false,
        }),
    },
});

AuctionStack.navigationOptions = tabBarVisibility;

export const BazaarStack = createStackNavigator({
    Bazaar: {
        screen: Marketplace,
        navigationOptions: ({ navigation }) => ({
            header: <AppHeader navigation={navigation} />,
        }),
    },
    Item: {
        screen: Item,
        navigationOptions: ({ navigation }) => ({
            header: null,
            tabBarVisible: false,
            gesturesEnabled: false,
        }),
    },
    ImageDetail: {
        screen: ImageDetail,
        navigationOptions: ({ navigation }) => ({
            header: null,
            tabBarVisible: false,
            gesturesEnabled: false,
        }),
    },
    Checkout: {
        screen: Checkout,
        navigationOptions: ({ navigation }) => ({
            header: null,
            tabBarVisible: false,
            gesturesEnabled: false,
        }),
    },
});

BazaarStack.navigationOptions = tabBarVisibility;

export const EventsStack = createStackNavigator({
    Events: {
        screen: Events,
        navigationOptions: ({ navigation }) => ({
            header: <AppHeader navigation={navigation} />,
            gesturesEnabled: false,
        }),
    },
    Event: {
        screen: Event,
        navigationOptions: ({ navigation }) => ({
            header: <AppHeader navigation={navigation} />,
            gesturesEnabled: false,
        }),
    },
});

EventsStack.navigationOptions = tabBarVisibility;

export const Tabs = createBottomTabNavigator({
    Event: {
        screen: EventsStack,
        navigationOptions: {
            tabBarLabel: 'Event',
            tabBarIcon: ({ tintColor }) => (
                <Icon name="black-tie" type="font-awesome" size={28} color={tintColor} />
            ),
        },
    },
    Auction: {
        screen: AuctionStack,
        navigationOptions: {
            tabBarLabel: 'Silent Auction',
            tabBarIcon: ({ tintColor }) => (
                <Icon name="gavel" type="font-awesome" size={28} color={tintColor} />
            ),
        },
    },
    Bazaar: {
        screen: BazaarStack,
        navigationOptions: {
            tabBarLabel: 'Bazaar',
            tabBarIcon: ({ tintColor }) => (
                <Icon name="store" type="fontisto" size={28} color={tintColor} />
            ),
        },
    },
    Profile: {
        screen: ProfileStack,
        navigationOptions: {
            tabBarLabel: 'Profile',
            tabBarIcon: ({ tintColor }) => (
                <Icon name="user" type="evilicon" size={28} color={tintColor} />
            ),
        },
    },
}, { initialRouteName: 'Event' });