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

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

let screen = Dimensions.get('window');

export const Tabs = createBottomTabNavigator({
  'Event': {
    screen: Event,
    navigationOptions: {
      tabBarLabel: 'Event',
      tabBarIcon: ({ tintColor }) => <Icon name="black-tie" type="fontawesome" size={28} color={tintColor} />,
    },
  },
  'Auction': {
    screen: Auction,
    navigationOptions: {
      tabBarLabel: 'Silent Auction',
      tabBarIcon: ({ tintColor }) => <Icon name="gavel" type="fontawesome" size={28} color={tintColor} />,
    },
  },
  'Bazaar': {
    screen: Marketplace,
    navigationOptions: {
      tabBarLabel: 'Bazaar',
      tabBarIcon: ({ tintColor }) => <Icon name="shopping-store" type="fontisto" size={28} color={tintColor} />,
    },
  },
  'Profile': {
    screen: Profile,
    navigationOptions: {
      tabBarLabel: 'Profile',
      tabBarIcon: ({ tintColor }) => <Icon name="ios-person-outline" type="ionicon" size={28} color={tintColor} />,
    },
  },
});

export const AuctionStack = createStackNavigator({
  Auction: {
    screen: Auction,
    navigationOptions: ({navigation}) => ({
      header: null,
    }),
  },
  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: null,
    }),
  },
  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: null,
      tabBarVisible: false,
      gesturesEnabled: false
    }),
  }
});

export const createRootNavigator = () => {
  return StackNavigator(
    {
      AuctionStack: {
        screen: AuctionStack,
        navigationOptions: {
          gesturesEnabled: false
        }
      },
      BazaarStack: {
        screen: BazaarStack,
        navigationOptions: {
          gesturesEnabled: false
        }
      },
      Tabs: {
        screen: Tabs,
        navigationOptions: {
          gesturesEnabled: false
        }
      }
    },
    {
      headerMode: "none",
      mode: "modal"
    }
  );
};