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

export type Placement =
  | 'top'
  | 'bottom'
  | 'right'
  | 'left'
  | 'top-left'
  | 'top-right'
  | 'bottom-left'
  | 'bottom-right';

export const StyledContent = styled(View)(({ theme }) => ({
  padding: theme.__hd__.appCue.space.padding,
  backgroundColor: theme.__hd__.appCue.colors.background,
  borderRadius: theme.__hd__.appCue.radii.container,
  alignSelf: 'center',
}));

export const StyledContainer = styled(View)(({ theme }) => ({
  width: '100%',
  height: '100%',
  backgroundColor: theme.__hd__.appCue.colors.backdropColor,
}));

export const StyledIconContainer = styled(Animated.View)<{
  themePlacement: Placement;
}>(({ theme, themePlacement }) => ({
  position: 'absolute',
  color: theme.__hd__.appCue.colors.background,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  ...(themePlacement === 'top' && {
    bottom: -theme.__hd__.appCue.space.arrowOffset,
    width: '100%',
  }),
  ...(themePlacement === 'bottom' && {
    top: -theme.__hd__.appCue.space.arrowOffset,
    transform: [{ rotate: '180deg' }],
    width: '100%',
  }),
  ...(themePlacement === 'right' && {
    left: -theme.__hd__.appCue.space.arrowOffset,
    transform: [{ rotate: '90deg' }],
    height: '100%',
  }),
  ...(themePlacement === 'left' && {
    right: -theme.__hd__.appCue.space.arrowOffset,
    transform: [{ rotate: '-90deg' }],
    height: '100%',
  }),
  ...(themePlacement === 'top-left' && {
    bottom: -theme.__hd__.appCue.space.arrowOffset,
    right: theme.__hd__.appCue.space.arrowOffset,
  }),
  ...(themePlacement === 'top-right' && {
    bottom: -theme.__hd__.appCue.space.arrowOffset,
    left: theme.__hd__.appCue.space.arrowOffset,
  }),
  ...(themePlacement === 'bottom-left' && {
    top: -theme.__hd__.appCue.space.arrowOffset,
    right: theme.__hd__.appCue.space.arrowOffset,
    transform: [{ rotate: '180deg' }],
  }),
  ...(themePlacement === 'bottom-right' && {
    top: -theme.__hd__.appCue.space.arrowOffset,
    left: theme.__hd__.appCue.space.arrowOffset,
    transform: [{ rotate: '180deg' }],
  }),
}));