import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { MaterialCommunityIcons } from "@expo/vector-icons";

import AccountNavigator from "./AccountNavigator";
import FeedNavigator from "./FeedNavigator";
import MessagesNavigator from "./MessagesNavigator";
import ForecastNavigator from "./ForecastNavigator";
import NewListingButton from "./NewListingButton";
import SharingDataOptionsNavigator from "./SharingDataOptionsNavigator";
import SharingDataNavigator from "./SharingDataNavigator";
import routes from "./routes";

const Tab = createBottomTabNavigator();

const AppNavigator = () => (
  <Tab.Navigator style={{ backgroundColor: "white" }}>
    <Tab.Screen
      name="Home"
      component={FeedNavigator}
      options={{
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
      }}
    />
    <Tab.Screen
      name="Previsão"
      component={ForecastNavigator}
      options={{
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons
            name="check-circle"
            color={color}
            size={size}
          />
        ),
      }}
    />

    <Tab.Screen
      name="SharingData"
      component={SharingDataOptionsNavigator}
      options={({ navigation }) => ({
        tabBarButton: () => (
          <NewListingButton
            onPress={() =>
              navigation.navigate(routes.SHARING_DATA)}
          />
        ),
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons
            name="plus-circle"
            color={color}
            size={size}
          />
        ),
      })}
    />

    <Tab.Screen
      name="Notificação"
      component={MessagesNavigator}
      options={{
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons
            name="bell"
            color={color}
            size={size}
          />
        ),
      }}
    />
    <Tab.Screen
      name="Perfil"
      component={AccountNavigator}
      options={{
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="account" color={color} size={size} />
        ),
      }}
    />
  </Tab.Navigator>
);

export default AppNavigator;