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

import {PillVariant} from './interfaces';

export const getVariantValues = ({
  variant,
  appearance,
  theme,
}: {
  variant: PillVariant;
  appearance?: ThemeAppearance;
  theme: ThemeColors & NewThemeColors;
}) => {
  const source =
    appearance === 'auto' ? theme : getAppearanceSource(appearance);

  return {
    disabled: {
      backgroundColor: source.background.elements.grey,
      borderColor: source.border.neutral.default,
      color: source.text.neutral.lighter,
    },
    error: {
      backgroundColor: source.background.feedback.error,
      borderColor: source.border.states.error,
      color: source.text.feedback.error,
      Icon: IconExclamationCircle,
    },
    highlight: {
      backgroundColor: source.background.feedback.highlight,
      borderColor: source.border.states.highlight,
      color: source.text.feedback.highlight,
      Icon: IconBulb,
    },
    info: {
      backgroundColor: source.background.feedback.info,
      borderColor: source.border.states.info,
      color: source.text.feedback.info,
      Icon: IconInfoCircle,
    },
    neutral: {
      backgroundColor: source.background.layout.tertiary,
      borderColor: source.border.neutral.default,
      color: source.text.neutral.lighter,
      Icon: IconAlertSquareRounded,
    },
    success: {
      backgroundColor: source.background.feedback.success,
      borderColor: source.border.states.success,
      color: source.text.feedback.success,
      Icon: IconCheck,
    },
    warning: {
      backgroundColor: source.background.feedback.warning,
      borderColor: source.border.states.warning,
      color: source.text.feedback.warning,
      Icon: IconAlertTriangle,
    },
    primary: {
      backgroundColor: source.background.layout.brand,
      borderColor: source.border.neutral.brand,
      color: source.text.neutral.brand,
      Icon: IconBookmark,
    },
  }[variant];
};

export const styles = StyleSheet.create({
  container: {flexDirection: 'row'},
  content: {
    alignItems: 'center',
    borderRadius: BORDER_RADIUS.l,
    borderWidth: 1,
    flexDirection: 'row',
    gap: SPACING['x0.5'],
  },
  md: {
    paddingHorizontal: SPACING['x1.5'],
    paddingVertical: SPACING.x1,
  },
  sm: {
    paddingHorizontal: SPACING.x1,
    paddingVertical: SPACING['x0.5'],
  },
});
