import React from 'react';
import { View, Dimensions, Image, TouchableWithoutFeedback } from 'react-native';
import { Button, Icon } from 'native-base';
import { createStackNavigator } from 'react-navigation';

import Home from '../pages/Home';
import AdvertisingDetail from '../pages/AdvertisingDetail';
import CategoryDetail from '../pages/CategoryDetail';
import CategoryHomeDetail from '../pages/CategoryHomeDetail';
import DrugDetail from '../pages/DrugDetail';
import Search from '../pages/Search';
import Preference from '../pages/Preference';
import DeliveryLocation from '../pages/DeliveryLocation';
import DeliveryRule from '../pages/DeliveryRule';
import OrderRule from '../pages/OrderRule';
import Faq from '../pages/Faq';
import Feedback from '../pages/Feedback';
import Contact from '../pages/Contact';
import Cart from '../pages/Cart';
import Password from '../pages/Password';
import Authentication from '../pages/Authentication';
import Edit from '../pages/Edit';
import Account from '../pages/Account';
import OrderList from '../pages/OrderList';
import OrderDetailList from '../pages/OrderDetailList';
import Order from '../pages/Order';

import CategoryList from '../containers/CategoryList';
import SubCategoryList from '../containers/SubCategoryList';
import SuccessInfo from '../containers/SuccessInfo';

import NavigationService from './NavigationService';
import Icon1 from 'react-native-vector-icons/MaterialCommunityIcons';

const AuthStack = createStackNavigator(
    {
        Home: { screen: Home, navigationOptions: () => ({ title: '' }) },
        AdvertisingDetail: { screen: AdvertisingDetail, navigationOptions: () => ({ title: '' }) },
        CategoryDetail: { screen: CategoryDetail, navigationOptions: () => ({ title: '' }) },
        CategoryHomeDetail: { screen: CategoryHomeDetail, navigationOptions: () => ({ title: '' }) },
        DrugDetail: { screen: DrugDetail, navigationOptions: () => ({ title: '' }) },
        Preference: { screen: Preference, navigationOptions: () => ({ title: '' }) },
        DeliveryLocation: { screen: DeliveryLocation, navigationOptions: () => ({ title: '' }) },
        DeliveryRule: { screen: DeliveryRule, navigationOptions: () => ({ title: '' }) },
        OrderRule: { screen: OrderRule, navigationOptions: () => ({ title: '' }) },
        Faq: { screen: Faq, navigationOptions: () => ({ title: '' }) },
        Feedback: { screen: Feedback, navigationOptions: () => ({ title: '' }) },
        Contact: { screen: Contact, navigationOptions: () => ({ title: '' }) },
        Cart: { screen: Cart, navigationOptions: () => ({ title: '' }) },
        Password: { screen: Password, navigationOptions: () => ({ title: '' }) },
        Authentication: { screen: Authentication, navigationOptions: () => ({ header: null }) },
        Edit: { screen: Edit, navigationOptions: () => ({ title: '' }) },
        Account: { screen: Account, navigationOptions: () => ({ title: '' }) },
        OrderList: { screen: OrderList, navigationOptions: () => ({ title: '' }) },
        OrderDetailList: { screen: OrderDetailList, navigationOptions: () => ({ title: '' }) },
        Order: { screen: Order, navigationOptions: () => ({ title: '' }) },
        Search: { screen: Search, navigationOptions: () => ({ header: null }) },
        CategoryList: { screen: CategoryList, navigationOptions: () => ({ header: null }) },
        SubCategoryList: { screen: SubCategoryList, navigationOptions: () => ({ header: null }) },
        SuccessInfo: { screen: SuccessInfo, navigationOptions: () => ({ header: null }) }
    },
    {
        defaultNavigationOptions: {
            headerStyle: {
                backgroundColor: '#F5F6F8',
                elevation: 0
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                color: '#fff',
                width: (Dimensions.get('window').width) / 2
            },
            headerLeft: (
                <View style={{ flex: 1, flexDirection: 'row' }}>
                    <Button onPress={() => NavigationService.navigate('CategoryList')} transparent>
                        <Icon name='md-menu' size={25} style={{ color: '#70BE44' }} />
                    </Button>
                    <TouchableWithoutFeedback onPress={() => NavigationService.navigate('Home')}>
                        <Image source={{ uri: 'https://melhem.az//uploads/settings/04d08bd7eeae5e5af03e12a2322d50d8.png' }} style={{ marginTop: 7, width: 100, height: 30 }} />
                    </TouchableWithoutFeedback>
                </View>
            ),
            headerRight: (
                <View style={{ flex: 1, flexDirection: 'row' }}>
                    <Button transparent onPress={() => NavigationService.navigate('Search')}>
                        <Icon name='search' size={25} style={{ color: '#333' }} />
                    </Button>
                    <Button badge transparent onPress={() => NavigationService.navigate('Cart')}>
                        <Icon1 name='cart-outline' size={25} style={{ color: '#333' }} />
                    </Button>
                    <Button transparent onPress={() => NavigationService.navigate('Preference')}>
                        <Icon name='md-person' size={25} style={{ color: '#333' }} />
                    </Button>
                </View>
            ),
        }
    });
export default AuthStack;