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

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

type ThemePadding = 'narrowContent' | 'wideContent';

type ThemeSize = 'medium' | 'small';

type ThemeVariant = 'filled' | 'outlined';

const StyledView = styled(Animated.View)<{
  themeIntent: ThemeIntent;
  themePadding: ThemePadding;
  themeSize: ThemeSize;
  themeVariant: ThemeVariant;
  themeIsStringBadge: boolean;
}>(
  ({
    themeIntent,
    themePadding,
    themeSize,
    themeVariant,
    themeIsStringBadge,
    theme,
  }) => {
    const backgroundColor = themeIsStringBadge
      ? theme.__hd__.badge.colors.stringBackground[themeIntent]
      : theme.__hd__.badge.colors[themeIntent];
    return {
      height: theme.__hd__.badge.sizes[themeSize].height,
      minWidth: theme.__hd__.badge.sizes[themeSize].minWidth,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor,
      borderRadius: theme.radii.rounded,
      paddingHorizontal:
        themePadding === 'wideContent'
          ? theme.__hd__.badge.space[themeSize].horizontalPadding
          : undefined,
      borderWidth: theme.__hd__.badge.borderWidths.default,
      borderColor:
        themeVariant === 'outlined'
          ? theme.__hd__.badge.colors.border
          : backgroundColor,
    };
  }
);

const StyledText = styled(Typography.Caption)<{
  themeSize: ThemeSize;
  themeIntent: ThemeIntent;
  themeIsStringBadge: boolean;
}>(({ theme, themeSize, themeIntent, themeIsStringBadge }) => ({
  fontSize: theme.__hd__.badge.fontSizes[themeSize],
  lineHeight: theme.__hd__.badge.lineHeights[themeSize],
  fontFamily: theme.__hd__.badge.fonts[themeSize],
  color: themeIsStringBadge
    ? theme.__hd__.badge.colors.stringText[themeIntent]
    : theme.__hd__.badge.colors.text,
  includeFontPadding: false,
  textAlignVertical: 'center',
  textAlign: 'center',
}));

const StyledStatus = styled(Animated.View)<{
  themeIntent: ThemeIntent;
}>(({ themeIntent, theme }) => ({
  position: 'absolute',
  top: theme.__hd__.badge.space.statusPositionTop,
  right: theme.__hd__.badge.space.statusPositionRight,
  height: theme.__hd__.badge.sizes.statusHeight,
  width: theme.__hd__.badge.sizes.statusWidth,
  backgroundColor: theme.__hd__.badge.colors[themeIntent],
  borderRadius: theme.radii.rounded,
}));

const StyledCount = styled(View)(({ theme }) => ({
  backgroundColor: theme.__hd__.badge.colors.danger,
  borderRadius: theme.__hd__.badge.radii.count,
  minWidth: theme.__hd__.badge.sizes.count.width,
  height: theme.__hd__.badge.sizes.count.height,
  alignItems: 'center',
  justifyContent: 'center',
  textAlign: 'center',
  textAlignVertical: 'center',
  color: theme.__hd__.badge.colors.text,
  display: 'flex',
  paddingHorizontal: theme.__hd__.badge.space.countPaddingHorizontal,
  position: 'absolute',
  top: theme.__hd__.badge.space.countPositionTop,
  right: theme.__hd__.badge.space.countPositionRight,
}));

const StyledCountText = styled(Typography.Text)(({ theme }) => ({
  height: theme.__hd__.badge.sizes.count.height,
  lineHeight: theme.__hd__.badge.lineHeights.count,
  color: theme.__hd__.badge.colors.text,
  fontSize: theme.__hd__.badge.fontSizes.count,
}));

const StyledIcon = styled(Icon)<{
  themeSize: ThemeSize;
}>(({ themeSize, theme }) => ({
  fontSize: theme.__hd__.badge.fontSizes[themeSize],
}));

export {
  StyledCountText,
  StyledView,
  StyledText,
  StyledStatus,
  StyledIcon,
  StyledCount,
};