import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";

import CustomDrawer from "@components/CustomDrawer/CustomDrawer";
import TabNavigator from "./TabNavigator";
import Ionicons from "@expo/vector-icons/Ionicons";
import SettingsScreen from "@screens/SettingsScreen";
import ProfileScreen from "@screens/ProfileScreen";
import { useTheme } from "@styles";
import { useTranslation } from "react-i18next";

const Drawer = createDrawerNavigator();

const AppStack = () => {
  const { colors } = useTheme();
  const { t } = useTranslation();
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawer {...props} />}
      screenOptions={{
        headerShown: false,
        drawerActiveBackgroundColor: "#aa18ea",
        drawerActiveTintColor: "#fff",
        drawerInactiveTintColor: colors.textPrimary,
        drawerLabelStyle: {
          marginLeft: 5,
          fontSize: 16,
        },
      }}
    >
      <Drawer.Screen
        name="Home"
        component={TabNavigator}
        options={{
          unmountOnBlur: true,
          title:t("sidebar.home"),
          drawerIcon: ({ color }) => (
            <Ionicons name="home-outline" size={22} color={color} />
          ),
        }}
      />
      <Drawer.Screen
        name='Profile'
        component={ProfileScreen}
        options={{
          title:t("sidebar.profile"),
          drawerIcon: ({ color }) => (
            <Ionicons name="person-outline" size={22} color={color} />
          ),
        }}
      />
      <Drawer.Screen
        name='Settings'
        component={SettingsScreen}
        options={{
          title: t("sidebar.settings"),
          drawerIcon: ({ color }) => (
            <Ionicons name="settings-outline" size={22} color={color} />
          ),
        }}
      />
    </Drawer.Navigator>
  );
};

export default AppStack;