import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { TabStack } from './tabStack';
import { CustomersStack } from './customersStack';
import { CustomDrawerContent } from './customDrawerContent';
import {
  ProposalsScreen,
  EstimatesScreen,
  InvoicesScreen,
  ProjectsScreen,
  TasksScreen,
  TicketsScreen,
} from '@features';
import { route, RouteParams } from '@utils';
import { useTheme } from '@theme';

export type DrawerStackParamList = { home: undefined } & Pick<
  RouteParams,
  | 'customers'
  | 'proposals'
  | 'estimates'
  | 'invoices'
  | 'projects'
  | 'tasks'
  | 'tickets'
>;

const Drawer = createDrawerNavigator<DrawerStackParamList>();

export const DrawerStack = () => {
  const { theme: colors } = useTheme();

  return (
    <Drawer.Navigator
      drawerContent={CustomDrawerContent}
      screenOptions={{
        swipeEnabled: false,
        headerStyle: {
          backgroundColor: colors.header,
        },
        headerTitleStyle: {
          fontSize: 17,
          fontWeight: '700',
          color: colors.text,
          letterSpacing: 0.2,
        },
        headerTitleAlign: 'center',
        headerTintColor: colors.text,
        headerShadowVisible: false,
      }}>
      <Drawer.Screen
        name="home"
        component={TabStack}
        options={{ headerShown: false }}
      />
      <Drawer.Screen
        name={route.customers}
        component={CustomersStack}
        options={{ headerShown: false }}
      />
      <Drawer.Screen name={route.proposals} component={ProposalsScreen} />
      <Drawer.Screen name={route.estimates} component={EstimatesScreen} />
      <Drawer.Screen name={route.invoices} component={InvoicesScreen} />
      <Drawer.Screen name={route.projects} component={ProjectsScreen} />
      <Drawer.Screen name={route.tasks} component={TasksScreen} />
      <Drawer.Screen name={route.tickets} component={TicketsScreen} />
    </Drawer.Navigator>
  );
};