import React from 'react';
import { Pressable, StyleSheet, type ViewStyle } from 'react-native';

import type { SurfaceColor } from '../../../../types/surfaceColor';
import type { SurfaceTheme } from '../../../../types/theme';
import type { ToastProps } from '../../../../types/toast';
import { View } from '../../../layout/public';
import { Surface } from '../../../surface/public';
import { useTheme } from '../../../theme/runtime';
import { Text } from '../../../typography/public';

/*** Renders one transient toast notification. */
export function Toast({
  title,
  description,
  status = 'default',
  onDismiss,
  interactionPolicy = 'enabled',
  testID,
}: ToastProps) {
  const { theme } = useTheme();
  const statusColor = resolveToastStatusColor(theme, status);
  const statusTextColor = resolveToastStatusTextColor(status);
  const passive = interactionPolicy === 'passive';
  const statusStyle = React.useMemo<ViewStyle>(
    () => ({ borderLeftColor: statusColor }),
    [statusColor],
  );

  return (
    <Surface p="m" style={[styles.root, statusStyle]} testID={testID} variant="raised">
      <View align="center" direction="row" justify="space-between">
        <View flex={1}>
          {title ? (
            <Text variant="label" weight="medium">
              {title}
            </Text>
          ) : null}
          {description ? <Text emphasis="muted">{description}</Text> : null}
        </View>
        {onDismiss ? (
          <Pressable
            accessibilityLabel="Dismiss notification"
            accessibilityRole="button"
            onPress={passive ? undefined : onDismiss}
            testID={testID ? `${testID}-dismiss` : undefined}
          >
            <Text color={statusTextColor}>×</Text>
          </Pressable>
        ) : null}
      </View>
    </Surface>
  );
}

/*** Resolves the border color representing a toast status. */
function resolveToastStatusColor(theme: SurfaceTheme, status: ToastProps['status']) {
  switch (status) {
    case 'success':
      return theme.semantics.success.base;
    case 'warning':
      return theme.semantics.warning.base;
    case 'error':
      return theme.semantics.error.base;
    case 'info':
      return theme.semantics.info.base;
    default:
      return theme.semantics.action.primary.base;
  }
}

/*** Resolves the semantic text color representing a toast status. */
function resolveToastStatusTextColor(status: ToastProps['status']): SurfaceColor {
  switch (status) {
    case 'success':
      return 'success';
    case 'warning':
      return 'warning';
    case 'error':
      return 'error';
    case 'info':
      return 'info';
    default:
      return 'primary';
  }
}

const styles = StyleSheet.create({
  root: {
    borderLeftWidth: 3,
    minWidth: 280,
    shadowOffset: { height: 6, width: 0 },
    shadowOpacity: 0.14,
    shadowRadius: 12,
  },
});