import {StyleSheet} from 'react-native';
import {
  IconCheck,
  IconInfoCircle,
  IconInfoTriangle,
  IconX,
} from '@tabler/icons-react-native';
import {SnackbarVariant} from '@redux/events/interfaces';
import {
  BORDER_RADIUS,
  NewThemeColors,
  SPACING,
  ThemeColors,
} from '@shared/theme';

export const getVariantValues = (
  variant: SnackbarVariant,
  theme: ThemeColors & NewThemeColors,
) => {
  return {
    info: {
      primaryColor: theme.graphics.info[600],
      secondaryColor: theme.border.states.info,
      Icon: IconInfoCircle,
    },
    warning: {
      primaryColor: theme.graphics.warning[600],
      secondaryColor: theme.border.states.warning,
      Icon: IconInfoTriangle,
    },
    error: {
      primaryColor: theme.graphics.error[600],
      secondaryColor: theme.border.states.error,
      Icon: IconX,
    },
    success: {
      primaryColor: theme.graphics.success[600],
      secondaryColor: theme.border.states.success,
      Icon: IconCheck,
    },
  }[variant];
};

export const styles = StyleSheet.create({
  container: {paddingBottom: SPACING.x2},
  content: {
    borderRadius: BORDER_RADIUS.m,
    overflow: 'hidden',
  },
  infoContainer: {
    flexDirection: 'row',
    gap: SPACING.x1,
    padding: SPACING.x2,
  },
  middleContent: {
    flex: 1,
    gap: SPACING['x0.5'],
  },
  progressBackground: {
    height: 6,
    width: '100%',
  },
  progress: {
    height: 6,
    position: 'absolute',
  },
});
