import styled from '@emotion/native';
import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
import type { ComponentProps } from 'react';
import type { ViewProps } from 'react-native';
import type { IntentType } from './types';
import type { TextProps } from '../Typography/Text';
import Typography from '../Typography';
import type { IconProps } from '../Icon';
import Icon from '../Icon';

const ToastContainerWrapper = styled(View)<{ position: 'top' | 'bottom' }>(
  ({ theme, position }) => ({
    ...StyleSheet.absoluteFillObject,
    paddingHorizontal: theme.__hd__.toast.space.wrapperVerticalPadding,
    paddingVertical: theme.__hd__.toast.space.wrapperHorizontalPadding,
    flexDirection: position === 'bottom' ? 'column-reverse' : 'column',
    elevation: 9999,
  })
);

const Container = styled(Animated.View)<{
  themeVariant: 'default' | 'round';
  themeIntent: IntentType;
}>(({ theme, themeVariant, themeIntent }) => ({
  borderRadius: themeVariant === 'round' ? theme.__hd__.toast.radii.default : 0,
  backgroundColor: theme.__hd__.toast.colors.backgrounds[themeIntent],
  minHeight: theme.__hd__.toast.sizes.height,
  flexDirection: 'row',
  ...theme.__hd__.toast.shadows.wrapper,
}));

const IconContainer = styled(View)<ViewProps>(({ theme }) => ({
  alignItems: 'center',
  paddingLeft: theme.__hd__.toast.space.iconLeftPadding,
}));

const TextContainer = styled(View)<ViewProps>(({ theme }) => ({
  paddingHorizontal: theme.__hd__.toast.space.textHorizontalPadding,
  flex: 1,
}));

const ContentContainer = styled(View)<{ showDivider: boolean }>(
  ({ theme, showDivider }) => ({
    paddingVertical: theme.__hd__.toast.space.contentVerticalPadding,
    flex: 1,
    borderRightWidth: showDivider ? theme.__hd__.toast.borderWidths.base : 0,
    borderColor: theme.__hd__.toast.colors.divider,
    flexDirection: 'row',
  })
);

const CTAWrapper = styled(TouchableOpacity)<
  ComponentProps<typeof TouchableOpacity>
>(({ theme }) => ({
  paddingHorizontal: theme.__hd__.toast.space.ctaPadding,
  justifyContent: 'center',
}));

const StyledBody = styled(Typography.Body)<
  TextProps & {
    themeIntent: IntentType;
  }
>(({ theme, themeIntent }) => ({
  color: theme.__hd__.toast.colors.texts[themeIntent],
}));

const StyledIcon = styled(Icon)<
  IconProps & {
    themeIntent: IntentType;
  }
>(({ theme, themeIntent }) => ({
  color: theme.__hd__.toast.colors.texts[themeIntent],
}));

export {
  ToastContainerWrapper,
  Container,
  ContentContainer,
  TextContainer,
  IconContainer,
  CTAWrapper,
  StyledBody,
  StyledIcon,
};