import React from 'react';
import { TouchableOpacity, StyleSheet, Platform } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { DrawerNavigationProp } from '@react-navigation/drawer';
import Icon from 'react-native-vector-icons/Ionicons';
import { CustomersScreen, CustomerDetailsScreen, AddCustomerScreen } from '@features';
import { route, RouteParams } from '@utils';
import { useTheme } from '@theme';
import { getStyles } from './customersStack.styles';

export type CustomersStackParamList = Pick<
  RouteParams,
  'customersList' | 'customerDetails' | 'addCustomer'
>;

const Stack = createNativeStackNavigator<CustomersStackParamList>();

export const CustomersStack = () => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: colors.header,
        },
        headerTitleStyle: {
          fontSize: 17,
          fontWeight: '700',
          color: colors.text,
        },
        headerTitleAlign: 'center',
        headerTintColor: colors.text,
        headerShadowVisible: false,
        statusBarTranslucent: false,
      }}>
      <Stack.Screen
        name={route.customersList}
        component={CustomersScreen}
        options={({ navigation }) => ({
          headerTitle: 'Customers',
          headerLeft: () => (
            <TouchableOpacity
              style={styles.drawerButton}
              activeOpacity={0.7}
              onPress={() => {
                const parentNav = navigation.getParent<DrawerNavigationProp<any>>();
                if (parentNav) {
                  parentNav.openDrawer();
                } else {
                  (navigation as any).openDrawer?.();
                }
              }}>
              <Icon name="menu-outline" size={20} color={colors.text} />
            </TouchableOpacity>
          ),
          headerRight: () => (
            <TouchableOpacity
              onPress={() => navigation.navigate(route.addCustomer)}
              style={{
                marginRight: 8,
                backgroundColor: colors.icon,
                width: 32,
                height: 32,
                borderRadius: 16,
                justifyContent: 'center',
                alignItems: 'center',
                shadowColor: colors.icon,
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.25,
                shadowRadius: 3.84,
                elevation: 3,
              }}
              activeOpacity={0.7}
              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
              <Icon name="add" size={20} color="#FFFFFF" />
            </TouchableOpacity>
          ),
        })}
      />
      <Stack.Screen
        name={route.customerDetails}
        component={CustomerDetailsScreen}
        options={{ headerTitle: 'Customer Details' }}
      />
      <Stack.Screen
        name={route.addCustomer}
        component={AddCustomerScreen}
        options={{ headerTitle: 'Add Customer' }}
      />
    </Stack.Navigator>
  );
};