import React, {Component} from "react";
import { Image, Button,StyleSheet, Dimensions ,TouchableHighlight, Linking } from "react-native";

import { TabNavigator,DrawerNavigator, StackNavigator } from "react-navigation"; //IDAN
import DashboardScreen from "../views/Dashboard";
import ContactScreen from "../views/Contacts/Contacts";
import ChatScreen from "../views/chat/ChatView";
import ProfileScreen from "../views/profile/ProfileView";
//import HospitalScreen from "../views/hospitalList/HospitalList";
import HospitalScreen from'./HospitalSearch';

import Icon from "react-native-vector-icons/FontAwesome";
import Screen1 from "../components/Screen1"; //IDAN
import Screen2 from "../components/Screen2"; //IDAN
import HelpScreen from "../components/Help"; //IDAN
const { width } = Dimensions.get('screen'); //IDAN

const styles = StyleSheet.create({
  icon: {
    height: 24,
    width: 24,
    backgroundColor: "transparent"
  }
});

const LoggedInNavigator = TabNavigator(
  {
    Contacts: {
      screen: ContactScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Image
            source={require("../images/phone_icon.png")}
            style={[styles.icon, { tintColor }]}
          />
        )
      }
    },
    Chat: {
      screen: ChatScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Image
            source={require("../images/chat_icon.png")}
            style={[styles.icon, { tintColor }]}
          />
        )
      }
    },
    Dashbaord: {
      screen: DashboardScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Image
            source={require("../images/home_icon.png")}
            style={[styles.icon, { tintColor }]}
          />
        )
      }
    },
    Profile: {
      screen: ProfileScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Image
            source={require("../images/social_icon.png")}
            style={[styles.icon, { tintColor }]}
          />
        )
      }
    },
    Search: {
      screen: HospitalScreen,
      navigationOptions: {
        header:null,
        tabBarIcon: ({ tintColor }) => (
          <Image
            source={require("../images/search_icon.png")}
            style={[styles.icon, { tintColor }]}
          />
        )
      }
    }
  },
  {
    initialRouteName: "Contacts",
    tabBarPosition: "bottom",
    swipeEnabled: false,
    showLabel: false,
    tabBarOptions: {
      showIcon: true,
      showLabel: false,
      style: {
        backgroundColor: "white"
      },
      activeTintColor: 'white',
      inactiveTintColor: 'black',
      indicatorStyle: {
        backgroundColor: 'red',
        borderRadius: 43/2,
        height: 43,
        position: 'relative',
        top: 3
      },
    }
  }
);



// export default () => <Drawer onNavigationStateChange={null} />

const testStack = StackNavigator({
  htest:{
    screen: LoggedInNavigator,
    headerMode: 'none',
    header: null,
    navigationOptions: {
      header: null,
    },
  },}
)

 const Drawer = DrawerNavigator ({
  HomeTabs:{
    screen: LoggedInNavigator,
  },
  Home:{
    screen: ContactScreen,
    navigationOptions: {
        drawerLabel: 'בית',
        drawerIcon: ({ tintColor }) => <Icon name="home" size={24} />
      },
  },
  Facebook: {
    screen: () => { Linking.openURL('https://www.facebook.com/StartAchCom/').catch(err => console.error('An error occurred', err)); return null},
    navigationOptions: {
        drawerLabel: 'מהפכה של שמחה',
        drawerIcon: ({ tintColor }) => <Icon name="facebook" size={24} />
      },
  },
  Facebook: {
    screen: () => { Linking.openURL('https://www.facebook.com/StartAchCom/').catch(err => console.error('An error occurred', err)); return null},
    navigationOptions: {
        drawerLabel: 'סטארט-אח',
        drawerIcon: ({ tintColor }) => <Icon name="facebook" size={24} />
      },
  },
  Profile:{
    screen: ProfileScreen,
    navigationOptions: {
        drawerLabel: "פרופיל",
        drawerIcon: ({ tintColor }) => <Icon name="user" size={24} />
      },
  },
  Help:{
    screen: HelpScreen,
    navigationOptions: {
        drawerLabel: 'עזרה',
        drawerIcon: ({ tintColor }) => <Icon name="info" size={24} />
      },
  },

},
{
  drawerWidth: width/1.5
}
);


class Root extends Component {
  render(){
    return(
      <Drawer>

      </Drawer>
    )
  }

}
export default Root;