import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useAtom, useSetAtom } from 'jotai';

import { Snackbar } from '../../atoms/Snackbar';
import { cn } from '../../lib/cn';
import { dismissToastAtom, toastsAtom } from '../../lib/toastStore';

import type { ToasterProps } from './Toaster.types';

/**
 * Toaster global. Lee la pila de toasts de `toastsAtom` y los muestra
 * apilados con NativeWind. Auto-dismiss vive en el atom (setTimeout).
 */
export function Toaster({ visibleToasts = 3, position = 'top' }: ToasterProps) {
  const [toasts] = useAtom(toastsAtom);
  const dismiss = useSetAtom(dismissToastAtom);
  const insets = useSafeAreaInsets();

  const visibleList = toasts.slice(-visibleToasts);

  if (visibleList.length === 0) {
    return null;
  }

  const offsetStyle =
    position === 'top' ? { top: insets.top + 8 } : { bottom: Math.max(insets.bottom, 8) + 8 };

  return (
    <View
      pointerEvents="box-none"
      style={offsetStyle}
      className={cn(
        'absolute left-0 right-0 gap-2 px-4',
        position === 'top' ? 'items-center' : 'items-center',
      )}
    >
      {visibleList.map((toast) => (
        <Snackbar
          key={toast.id}
          visible
          message={toast.message}
          variant={toast.variant}
          onDismiss={() => dismiss(toast.id)}
          actionLabel={toast.actionLabel}
          onActionPress={toast.onActionPress ?? (() => dismiss(toast.id))}
          className="w-full max-w-md"
        />
      ))}
    </View>
  );
}