import {StyleSheet} from 'react-native';
import {
  IconSquareRoundedPlus,
  IconInfoCircle,
  IconInfoTriangle,
  IconCheck,
  IconExclamationCircle,
  IconAlertSquareRounded,
} from '@tabler/icons-react-native';
import {BORDER_RADIUS, NewThemeColors, SPACING} from '@shared/theme';

import {BadgeVariant} from './interfaces';

export const styles = StyleSheet.create({
  badgeStyle: {
    alignItems: 'center',
    borderBottomLeftRadius: BORDER_RADIUS.l,
    borderBottomRightRadius: BORDER_RADIUS.l,
    borderWidth: 1,
    flexDirection: 'row',
    gap: SPACING['x0.25'],
    justifyContent: 'center',
    minHeight: 24,
    paddingVertical: SPACING['x0.5'],
  },
});

export const getBadgeValues = (
  variant: BadgeVariant = 'info',
  theme: NewThemeColors,
) => {
  return {
    neutral: {
      backgroundColor: theme.background.elements.default,
      borderColor: theme.border.neutral.default,
      color: theme.text.neutral.default,
      Icon: IconAlertSquareRounded,
    },
    info: {
      backgroundColor: theme.background.feedback.info,
      borderColor: theme.border.states.info,
      color: theme.text.feedback.info,
      Icon: IconInfoCircle,
    },
    highlight: {
      backgroundColor: theme.background.feedback.highlight,
      borderColor: theme.border.states.highlight,
      color: theme.text.feedback.highlight,
      Icon: IconSquareRoundedPlus,
    },
    success: {
      backgroundColor: theme.background.feedback.success,
      borderColor: theme.border.states.success,
      color: theme.text.feedback.success,
      Icon: IconCheck,
    },
    error: {
      backgroundColor: theme.background.feedback.error,
      borderColor: theme.border.states.error,
      color: theme.text.feedback.error,
      Icon: IconExclamationCircle,
    },
    warning: {
      backgroundColor: theme.background.feedback.warning,
      borderColor: theme.border.states.warning,
      color: theme.text.feedback.warning,
      Icon: IconInfoTriangle,
    },
    disabled: {
      backgroundColor: theme.background.elements.default,
      borderColor: theme.border.neutral.default,
      color: theme.text.neutral.lighter,
      Icon: IconInfoCircle,
    },
  }[variant];
};
