import {StyleSheet} from 'react-native';
import {TypographyProps} from '@components/_core/Typography';
import {BORDER_RADIUS, SPACING, NewThemeColors} from '@shared/theme';

import {CHIP_SIZES} from '../../constants';
import {ChipSize} from '../../interfaces';

export const getColors = ({
  active,
  disabled,
  theme,
}: {
  active?: boolean;
  disabled?: boolean;
  theme: NewThemeColors;
}) => ({
  backgroundColor:
    theme.action.background.brand[
      disabled ? 'disabled' : active ? 'selected' : 'default'
    ],
  borderColor: theme.border.neutral[disabled ? 'default' : 'brand'],
  color: disabled
    ? theme.button.background.disabled.darker
    : theme.text.neutral.brand,
});

export const getTextVariant = (size: ChipSize): Partial<TypographyProps> =>
  size === 'sm'
    ? {
        variant: 'xxs',
        style: {lineHeight: 14},
      }
    : {
        variant: 'xs',
        style: {lineHeight: 16},
      };

export const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    alignSelf: 'flex-start',
    borderRadius: BORDER_RADIUS.m,
    borderWidth: 1,
    flexDirection: 'row',
    gap: SPACING['x0.5'],
    maxWidth: '100%',
  },
  md: {
    height: CHIP_SIZES.md,
    paddingHorizontal: SPACING['x1.5'],
    paddingVertical: SPACING.x1,
  },
  sm: {
    height: CHIP_SIZES.sm,
    paddingHorizontal: SPACING.x1,
    paddingVertical: SPACING['x0.5'],
  },
});
