import { useDispatch, useSelector } from 'react-redux';
import { useMemo } from 'react';

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch();

export const useAppSelector = useSelector;

// Create a custom hook for notifications
export const useNotification = () => {
  const dispatch = useAppDispatch();
  
  return useMemo(() => ({
    showNotification: (message, type = 'info', duration = 3000) => {
      const id = Date.now();
      dispatch({
        type: 'ui/addNotification',
        payload: { message, type, duration, id },
      });
      
      if (duration !== null) {
        setTimeout(() => {
          dispatch({
            type: 'ui/removeNotification',
            payload: id,
          });
        }, duration);
      }
      
      return id;
    },
    
    closeNotification: (id) => {
      dispatch({
        type: 'ui/removeNotification',
        payload: id,
      });
    },
    
    clearNotifications: () => {
      dispatch({ type: 'ui/clearNotifications' });
    },
  }), [dispatch]);
};

// Custom hook for dark mode
export const useDarkMode = () => {
  const darkMode = useAppSelector((state) => state.ui.darkMode);
  const dispatch = useAppDispatch();
  
  return [
    darkMode,
    () => dispatch({ type: 'ui/toggleDarkMode' }),
    (value) => dispatch({ type: 'ui/setDarkMode', payload: value }),
  ];
};

// Custom hook for auth state
export const useAuth = () => {
  const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated);
  const isAdmin = useAppSelector((state) => state.auth.isAdmin);
  const user = useAppSelector((state) => state.auth.user);
  const userData = useAppSelector((state) => state.auth.userData);
  const apiKey = useAppSelector((state) => state.auth.apiKey);
  const loading = useAppSelector((state) => state.auth.loading);
  const error = useAppSelector((state) => state.auth.error);
  const dispatch = useAppDispatch();
  
  return {
    isAuthenticated,
    isAdmin,
    user,
    userData,
    apiKey,
    loading,
    error,
    login: (user, apiKey, isAdmin, email, firstName = "", lastName = "") => 
      dispatch({ 
        type: 'auth/loginSuccess', 
        payload: { user, apiKey, isAdmin, email, firstName, lastName}}),
    logout: () => dispatch({ type: 'auth/logout' }),
    clearError: () => dispatch({ type: 'auth/clearError' }),
  };
};

// Custom hook for cart state
export const useCart = () => {
  const items = useAppSelector((state) => state.cart.items);
  const itemCount = useAppSelector((state) => state.cart.itemCount);
  const total = useAppSelector((state) => state.cart.total);
  const loading = useAppSelector((state) => state.cart.loading);
  const error = useAppSelector((state) => state.cart.error);
  const dispatch = useAppDispatch();
  
  return {
    items,
    itemCount,
    total,
    loading,
    error,
    updateCart: (cartData) => 
      dispatch({ type: 'cart/updateCart', payload: cartData }),
    clearCart: () => dispatch({ type: 'cart/clearCart' }),
    clearError: () => dispatch({ type: 'cart/clearCartError' }),
  };
};