import React from "react";
import { Platform } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";

import { Palette } from "../styles";
import { Routes } from "./Routes";

import ProjectSettings from "../screens/ProjectSettings";
import AccountSettings from "../screens/AccountSettings";
import Settings from "../screens/Profile/Settings";

const isWeb = Platform.OS === "web";

const screenOptions = {
  headerShown: false,
  cardOverlayEnabled: true,
  headerStyle: {
    backgroundColor: Palette.background,
  },
  headerTitleAlign: "center",
  headerBackTitleVisible: false,
  ...(isWeb
    ? {
        animationEnabled: false,
        gestureEnabled: false,
      }
    : {}),
};

const HomeStack = createStackNavigator();

export default () => {
  return (
    <HomeStack.Navigator
      initialRouteName={Routes.Settings}
      screenOptions={[
        {
          contentStyle: {
            backgroundColor: Palette.white,
          },
        },
        screenOptions,
      ]}
    >
      <HomeStack.Screen
        name={Routes.Settings}
        component={Settings}
        options={{ headerShown: false }}
      />
      <HomeStack.Screen
        name={Routes.ProjectSettings}
        component={ProjectSettings}
        options={{ headerShown: false }}
      />
      <HomeStack.Screen
        name={Routes.AccountSettings}
        component={AccountSettings}
        options={{ headerShown: false }}
      />
    </HomeStack.Navigator>
  );
};