import styled from '@emotion/native';
import { View } from 'react-native';
import Typography from '../Typography';
import Icon from '../Icon';

type ThemeIntent =
  | 'primary'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'
  | 'archived'
  | 'neutral';

const StyledView = styled(View)<{
  themeIntent: ThemeIntent;
}>(({ themeIntent, theme }) => {
  return {
    backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
    borderRadius: theme.__hd__.tag.radii.default,
    paddingVertical: theme.__hd__.tag.space.verticalPadding,
    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'flex-start',
  };
});

const StyledText = styled(Typography.Caption)<{
  themeIntent: ThemeIntent;
}>(({ themeIntent, theme }) => {
  return {
    color: theme.__hd__.tag.colors[themeIntent],
    includeFontPadding: false,
    textAlignVertical: 'center',
    textAlign: 'center',
  };
});

const StyledTagIcon = styled(Icon)<{
  themeIntent: ThemeIntent;
  themePosition: 'left' | 'right';
}>(({ themeIntent, themePosition, theme }) => ({
  color: theme.__hd__.tag.colors[themeIntent],
  marginRight:
    themePosition === 'left' ? theme.__hd__.tag.space.iconGap : undefined,
  marginLeft:
    themePosition === 'right' ? theme.__hd__.tag.space.iconGap : undefined,
}));

export { StyledText, StyledView, StyledTagIcon };