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 ErrorVariant = 'full-screen' | 'in-page';

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

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

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

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

const StyledErrorButtonSecondary = styled(Button)(({ theme }) => ({
  marginTop: theme.__hd__.error.space.button.margin,
}));

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

const StyledErrorIconContainer = styled(View)(({ theme }) => ({
  marginBottom: theme.__hd__.error.space.imageMarginBottom,
  width: theme.__hd__.error.sizes.icon,
  height: theme.__hd__.error.sizes.icon,
  alignItems: 'center',
}));
const StyledErrorImage = styled(Image)(({ theme }) => ({
  marginBottom: theme.__hd__.error.space.imageMarginBottom,
  width: theme.__hd__.error.sizes.image,
  height: theme.__hd__.error.sizes.image,
  resizeMode: 'contain',
}));

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

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

export {
  ErrorVariant,
  StyledErrorModal,
  StyledErrorImage,
  StyledErrorContainer,
  StyledErrorButtonContainer,
  StyledErrorButtonSecondary,
  StyledErrorContent,
  StyledErrorTitle,
  StyledErrorDescription,
  StyledErrorImageContainer,
  StyledErrorIconContainer,
};