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.js';
import SignInOrRegister from './screens/SignInOrRegister.js';

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

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

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

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

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: Profile,
        navigationOptions: {
            tabBarLabel: 'Profile',
            tabBarIcon: ({ tintColor }) => (
                <Icon name="ios-person" type="font-awesome" size={28} color={tintColor} />
            ),
        },
    },
});

export const createRootNavigator = () => {
    return StackNavigator(
        {
            AuctionStack: {
                screen: AuctionStack,
                navigationOptions: {
                    gesturesEnabled: false,
                },
            },
            BazaarStack: {
                screen: BazaarStack,
                navigationOptions: {
                    gesturesEnabled: false,
                },
            },
            EventsStack: {
                screen: EventsStack,
                navigationOptions: {
                    gesturesEnabled: false,
                },
            },
            SignInOrRegisterStack: {
                screen: SignInOrRegister,
                navigationOptions: {
                    gesturesEnabled: false,
                },
            },
            Tabs: {
                screen: Tabs,
                navigationOptions: {
                    gesturesEnabled: false,
                },
            },
        },
        {
            mode: 'modal',
        },
    );
};