import { View, Image, TouchableOpacity, Platform } from 'react-native';
import styled from '@emotion/native';
import Typography from '../Typography';
import type { TextProps } from '../Typography/Text';

type ThemeSize =
  | 'small'
  | 'medium'
  | 'large'
  | 'xlarge'
  | 'xxlarge'
  | 'xxxlarge'
  | 'xxxxlarge'
  | 'xxxxxlarge';
type ThemeIntent =
  | 'neutral'
  | 'primary'
  | 'info'
  | 'danger'
  | 'success'
  | 'warning';

const StyledWrapper = styled(TouchableOpacity)<{
  themeSize: ThemeSize;
  themeIntent: ThemeIntent;
}>(({ themeSize, themeIntent, theme }) => ({
  borderRadius: theme.__hd__.avatar.radii.rounded,
  backgroundColor: theme.__hd__.avatar.colors[themeIntent],
  width: theme.__hd__.avatar.sizes[themeSize],
  height: theme.__hd__.avatar.sizes[themeSize],
  overflow: 'hidden',
}));

const StyledTextWrapper = styled(View)(() => ({
  alignItems: 'center',
  justifyContent: 'center',
  width: '100%',
  height: '100%',
}));

const StyledText = styled(Typography.Body)<
  TextProps & {
    themeSize: ThemeSize;
  }
>(({ themeSize, theme }) => ({
  fontFamily: theme.__hd__.avatar.fonts.default,
  fontSize: theme.__hd__.avatar.fontSizes[themeSize],
  textAlignVertical: 'center',
  textAlign: 'center',
  color: theme.__hd__.avatar.colors.text,
  overflow: 'hidden',
  ...Platform.select({
    ios: {
      lineHeight: 0, // center on ios
    },
    android: {
      lineHeight: null as unknown as number, // center on android
      marginTop: theme.__hd__.avatar.spaces.titleMarginTopForAndroid[themeSize],
    },
    web: {
      lineHeight: null as unknown as number, // center on android
    },
  }),
}));

const StyledImage = styled(Image)<{
  themeSize: ThemeSize;
}>(({ themeSize, theme }) => ({
  width: theme.__hd__.avatar.sizes[themeSize],
  height: theme.__hd__.avatar.sizes[themeSize],
}));

export { StyledWrapper, StyledImage, StyledTextWrapper, StyledText };