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

type ThemeIntent = 'success' | 'info' | 'warning' | 'error' | 'notification';
const Container = styled(View)<{
  themeVariant: 'rounded' | 'unrounded';
  themeIntent: ThemeIntent;
}>(({ theme, themeVariant = 'rounded', themeIntent }) => ({
  borderRadius:
    themeVariant === 'rounded' ? theme.__hd__.alert.radii.default : 0,
  backgroundColor: theme.__hd__.alert.colors.backgrounds[themeIntent],
  minHeight: theme.__hd__.alert.sizes.height,
  flexDirection: 'row',
  ...theme.__hd__.alert.shadows.wrapper,
}));

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

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

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

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

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

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

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