import styled from '@emotion/native';
import { View } from 'react-native';
import type { AvatarProps } from '../Avatar';
import Avatar from '../Avatar';
import Box from '../../Box';

const VISIBLE_RATIO = 0.7;

type ThemeVariant = 'horizontal' | 'vertical';

export const StyledWrapper = styled(View)<{
  themeSize: Required<AvatarProps>['size'];
  themeAvatarCount: number;
  themeVariant: ThemeVariant;
  themeHasSurplus: boolean;
}>(
  ({
    theme,
    themeSize,
    themeAvatarCount,
    themeVariant = 'horizontal',
    themeHasSurplus = false,
  }) => {
    const avatarSize = theme.__hd__.avatar.sizes[themeSize];

    const widthAndHeightByVariant = {
      horizontal: {
        width:
          avatarSize *
          (1 +
            VISIBLE_RATIO *
              (themeHasSurplus ? themeAvatarCount : themeAvatarCount - 1)),
        height: avatarSize,
      },
      vertical: {
        width: avatarSize,
        height:
          avatarSize *
          (1 +
            VISIBLE_RATIO *
              (themeHasSurplus ? themeAvatarCount : themeAvatarCount - 1)),
      },
    };

    return {
      flexDirection: themeVariant === 'horizontal' ? 'row' : 'column',
      height: widthAndHeightByVariant[themeVariant].height,
      width: widthAndHeightByVariant[themeVariant].width,
    };
  }
);

export const StyledAvatar = styled(Avatar)<{
  themeIndex: number;
  themeVariant: ThemeVariant;
}>(({ theme, themeIndex, size = 'small', themeVariant = 'horizontal' }) => {
  const avatarSize = theme.__hd__.avatar.sizes[size];
  const offset = avatarSize * VISIBLE_RATIO * themeIndex;

  return {
    position: 'absolute',
    left: themeVariant === 'horizontal' ? offset : undefined,
    top: themeVariant === 'vertical' ? offset : undefined,
  };
});

export const StyledSurplusContainer = styled(Box)<{
  themeIndex: number;
  themeSize: AvatarProps['size'];
  themeVariant: ThemeVariant;
}>(({ theme, themeIndex, themeVariant, themeSize = 'small' }) => {
  const avatarSize = theme.__hd__.avatar.sizes[themeSize];
  const offset = avatarSize * VISIBLE_RATIO * themeIndex;

  return {
    position: 'absolute',
    left: themeVariant === 'horizontal' ? offset : undefined,
    top: themeVariant === 'vertical' ? offset : undefined,
    borderRadius: theme.__hd__.avatar.radii.rounded,
    width: theme.__hd__.avatar.sizes[themeSize],
    height: theme.__hd__.avatar.sizes[themeSize],
    overflow: 'hidden',
  };
});