import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { TabStack } from './tabStack';
import { CustomDrawerContent } from './customDrawerContent';
import { CustomersScreen } from '../features/customers';
import { ProposalsScreen } from '../features/proposals';
import { EstimatesScreen } from '../features/estimates';
import { InvoicesScreen } from '../features/invoices';
import { ProjectsScreen } from '../features/projects';
import { TasksScreen } from '../features/tasks';
import { TicketsScreen } from '../features/tickets';
import { route, RouteParams } from '../utils/route';
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,
          elevation: 0,
          shadowOpacity: 0,
        },
        headerTitleStyle: {
          fontSize: 16,
          fontWeight: '700',
          color: colors.text,
        },
        headerTitleAlign: 'center',
        headerTintColor: colors.text,
      }}
    >
      {/* Tab Navigator has its own headers per tab, so hide Drawer header for home */}
      <Drawer.Screen
        name="home"
        component={TabStack}
        options={{ headerShown: false }}
      />
      <Drawer.Screen name={route.customers} component={CustomersScreen} />
      <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>
  );
};