import { Dimensions } from 'react-native';
import legacyVariables from './variables';

const window = Dimensions.get('window');

const CONTAINER_PADDING = legacyVariables.MEDIUM_SIZE * 2.0;
const CONTAINER_BACKGROUND_COLOR = legacyVariables.WHITE;
const IMAGE_SIZE = (window.width * 2.0) / 3.0;
const IMAGE_MARGIN = legacyVariables.MEDIUM_SIZE;
const TITLE_WRAPPER_MARGIN = legacyVariables.SMALL_SIZE;
const SUBTITLE_WRAPPER_MARGIN = legacyVariables.SMALL_SIZE;
const ACTIONS_WRAPPER_MARGIN = legacyVariables.LARGE_SIZE * 4.0;
const CLOSE_BUTTON_PADDING = legacyVariables.MEDIUM_SIZE;

const errorScreenStyles = {
  container: {
    flex: 1.0,
    alignItems: 'center',
    justifyContent: 'center',
    padding: CONTAINER_PADDING,
    backgroundColor: CONTAINER_BACKGROUND_COLOR,
  },
  image: {
    width: IMAGE_SIZE,
    height: IMAGE_SIZE,
    marginBottom: IMAGE_MARGIN,
  },
  titleWrapper: {
    marginVertical: TITLE_WRAPPER_MARGIN,
  },
  subtitleWrapper: {
    marginVertical: SUBTITLE_WRAPPER_MARGIN,
  },
  actionsWrapper: {
    marginTop: ACTIONS_WRAPPER_MARGIN,
  },
  closeButton: {
    position: 'absolute',
    top: 0.0,
    right: 0.0,
    padding: CLOSE_BUTTON_PADDING,
  },
} as const;

export default errorScreenStyles;