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

type State = 'idle' | 'selected' | 'applied';

export const StyledContainer = styled(View)(({ theme }) => ({
  width: theme.__hd__.mapPin.sizes.default,
  height: theme.__hd__.mapPin.sizes.default,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
}));

export const StyledContent = styled(View)<{
  themeState: State;
}>(({ theme, themeState }) => ({
  backgroundColor: theme.__hd__.mapPin.colors.background,
  borderRadius: theme.__hd__.mapPin.radii.default,
  borderWidth: theme.__hd__.mapPin.borderWidths.default,
  borderColor: theme.__hd__.mapPin.colors.border[themeState],
  elevation: theme.__hd__.mapPin.shadows.elevation,
  shadowOffset: theme.__hd__.mapPin.shadows.offset,
  shadowOpacity: theme.__hd__.mapPin.shadows.opacity,
  shadowRadius: theme.__hd__.mapPin.shadows.radius,
  shadowColor: theme.__hd__.mapPin.shadows.color,
  width: theme.__hd__.mapPin.sizes.default,
  height: theme.__hd__.mapPin.sizes.default,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
}));

export const StyledBadge = styled(View)(({ theme }) => ({
  right: theme.__hd__.mapPin.space.iconRight,
  top: theme.__hd__.mapPin.space.iconTop,
  position: 'absolute',
  backgroundColor: theme.__hd__.mapPin.colors.badge,
  borderRadius: theme.__hd__.mapPin.radii.badge,
  zIndex: 2,
  alignItems: 'center',
  justifyContent: 'center',
  width: theme.__hd__.mapPin.sizes.badge,
  height: theme.__hd__.mapPin.sizes.badge,
}));

export const StyledImage = styled.Image(({ theme }) => ({
  width: '100%',
  height: '100%',
  borderRadius:
    theme.__hd__.mapPin.radii.default -
    theme.__hd__.mapPin.borderWidths.default,
}));

export const StyledIcon = styled(Icon)(({ theme }) => ({
  color: theme.__hd__.mapPin.colors.icon,
}));

export const StyledBadgeIcon = styled(Icon)(({ theme }) => ({
  color: theme.__hd__.mapPin.colors.badgeIcon,
}));

export const StyledFocusIcon = styled(Icon)(({ theme }) => ({
  fontSize: theme.__hd__.mapPin.fontSizes.icon,
  textShadowColor: hexToRgba(
    theme.__hd__.mapPin.shadows.color,
    theme.__hd__.mapPin.shadows.opacity
  ),
  textShadowOffset: theme.__hd__.mapPin.shadows.offset,
  textShadowRadius: theme.__hd__.mapPin.shadows.radius,
}));