import styled from '@emotion/native';
import { View } from 'react-native';
import Image from '../../Image';
import Typography from '../../Typography';
import Button from '../../Button';
import Modal from '../../Modal';

type SuccessVariant = 'full-screen' | 'in-page';

const StyledSuccessContainer = styled(View)<{ themeVariant: SuccessVariant }>(
  ({ theme, themeVariant }) => ({
    display: 'flex',
    flex: 1,
    flexDirection: 'column',
    backgroundColor:
      themeVariant === 'in-page'
        ? theme.__hd__.success.colors.inPageBackground
        : theme.__hd__.success.colors.fullScreenBackground,
  })
);

const StyledSuccessImage = styled(Image)(({ theme }) => ({
  marginBottom: theme.__hd__.success.space.imageMarginBottom,
  width: theme.__hd__.success.sizes.image,
  height: theme.__hd__.success.sizes.image,
  resizeMode: 'contain',
}));

const StyledSuccessContent = styled(View)(({ theme }) => ({
  display: 'flex',
  flex: 1,
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  padding: theme.__hd__.success.space.wrapperPadding,
}));

const StyledSuccessImageContainer = styled(View)(({ theme }) => ({
  marginBottom: theme.__hd__.success.space.imageMarginBottom,
  width: theme.__hd__.success.sizes.image,
  height: theme.__hd__.success.sizes.image,
  alignItems: 'center',
}));

const StyledSuccessIconContainer = styled(View)(({ theme }) => ({
  marginBottom: theme.__hd__.success.space.imageMarginBottom,
  width: theme.__hd__.success.sizes.icon,
  height: theme.__hd__.success.sizes.icon,
  alignItems: 'center',
}));

const StyledSuccessTitle = styled(Typography.Title)(({ theme }) => ({
  textAlign: 'center',
  marginBottom: theme.__hd__.success.space.titleMarginBottom,
  color: theme.__hd__.success.colors.title,
}));

const StyledSuccessDescription = styled(Typography.Body)(({ theme }) => ({
  textAlign: 'center',
  color: theme.__hd__.success.colors.description,
}));

const StyledSuccessButtonContainer = styled(View)(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  paddingHorizontal: theme.__hd__.success.space.button.wrapperHorizontalPadding,
  paddingVertical: theme.__hd__.success.space.button.wrapperVerticalPadding,
}));

const StyledSuccessButtonSecondary = styled(Button)(({ theme }) => ({
  marginTop: theme.__hd__.success.space.button.secondaryCTAMarginTop,
}));

const StyledSuccessModal = styled(Modal)({
  height: '100%',
  width: '100%',
});

export {
  SuccessVariant,
  StyledSuccessImage,
  StyledSuccessContainer,
  StyledSuccessContent,
  StyledSuccessImageContainer,
  StyledSuccessIconContainer,
  StyledSuccessTitle,
  StyledSuccessDescription,
  StyledSuccessButtonContainer,
  StyledSuccessButtonSecondary,
  StyledSuccessModal,
};