import {StyleSheet} from 'react-native';
import {
  IconExclamationCircle,
  IconCheck,
  IconAlertTriangle,
  IconInfoCircle,
  IconBulb,
} from '@tabler/icons-react-native';
import {
  BORDER_RADIUS,
  NewThemeColors,
  SPACING,
  ThemeColors,
} from '@shared/theme';

import {AlertVariant} from './interfaces';

export const getVariantShape = (
  variant: AlertVariant,
  theme: ThemeColors & NewThemeColors,
) => {
  return {
    error: {
      backgroundColor: theme.background.feedback.error,
      textColor: theme.text.feedback.error,
      borderColor: theme.border.states.error,
      borderLeftColor: theme.graphics.error[500],
      Icon: IconExclamationCircle,
    },
    success: {
      backgroundColor: theme.background.feedback.success,
      textColor: theme.text.feedback.success,
      borderColor: theme.border.states.success,
      borderLeftColor: theme.graphics.success[500],
      Icon: IconCheck,
    },
    warning: {
      backgroundColor: theme.background.feedback.warning,
      textColor: theme.text.feedback.warning,
      borderColor: theme.border.states.warning,
      borderLeftColor: theme.graphics.warning[500],
      Icon: IconAlertTriangle,
    },
    info: {
      backgroundColor: theme.background.feedback.info,
      textColor: theme.text.feedback.info,
      borderColor: theme.border.states.info,
      borderLeftColor: theme.graphics.info[500],
      Icon: IconInfoCircle,
    },
    highLight: {
      backgroundColor: theme.background.feedback.highlight,
      textColor: theme.text.feedback.highlight,
      borderColor: theme.border.states.highlight,
      borderLeftColor: theme.graphics.purple[500],
      Icon: IconBulb,
    },
  }[variant];
};

export const styles = StyleSheet.create({
  container: {
    borderLeftWidth: 3,
    borderRadius: BORDER_RADIUS.s,
    borderWidth: 1,
    flexDirection: 'row',
    gap: SPACING.x1,
    overflow: 'hidden',
    padding: SPACING.x2,
  },
  actionButton: {
    paddingHorizontal: SPACING['x1.5'],
    paddingVertical: SPACING.x1,
  },
});
