import styled from '@emotion/native';
import type { TextProps } from 'react-native';
import { Animated, TouchableOpacity } from 'react-native';
import Box from '../Box';
import type { IconProps } from '../Icon';
import Icon from '../Icon';
import Typography from '../Typography';

const AnimatedTouchableHighlight =
  Animated.createAnimatedComponent(TouchableOpacity);

const StyledFAB = styled(AnimatedTouchableHighlight)<{
  themeActive?: boolean;
  themeIconOnly?: boolean;
}>(({ theme, themeActive, themeIconOnly }) => ({
  backgroundColor: themeActive
    ? theme.__hd__.fab.colors.buttonActiveBackground
    : theme.__hd__.fab.colors.buttonBackground,
  borderRadius: theme.radii.rounded,
  alignItems: 'center',
  justifyContent: 'center',
  alignSelf: 'flex-start',
  padding: theme.__hd__.fab.space.containerPadding,
  flexDirection: 'row',
  height: theme.__hd__.fab.sizes.height,
  ...(themeIconOnly && { width: theme.__hd__.fab.sizes.width }),
  ...theme.__hd__.fab.shadows.default,
}));

const StyledFABIcon = styled(Icon)<IconProps>(({ theme }) => ({
  color: theme.__hd__.fab.colors.icon,
  lineHeight: theme.__hd__.fab.lineHeights.icon,
  textAlignVertical: 'center',
  textAlign: 'center',
}));

const StyledFABText = styled(Typography.Body)<TextProps>(({ theme }) => ({
  color: theme.__hd__.fab.colors.titleText,
  textAlignVertical: 'center',
  textAlign: 'center',
  marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal,
}));

const StyledIconContainer = styled(Box)(({ theme }) => ({
  width: theme.__hd__.fab.sizes.iconContainerWidth,
  height: theme.__hd__.fab.sizes.iconContainerHeight,
  justifyContent: 'center',
  alignItems: 'center',
}));

export { StyledFAB, StyledFABIcon, StyledFABText, StyledIconContainer };