import {ImageStyle, StyleSheet} from 'react-native';
import {CHATS_SPACING} from '@modules/chats/utils';
import {BORDER_RADIUS} from '@shared/theme';

/** Tile size variants chosen by ImageMessageDisplayer based on attachment count. */
export type ImageSize = 'big' | 'medium' | 'small';

const sizeStyles = StyleSheet.create({
  bigImage: {
    borderRadius: BORDER_RADIUS.m,
    height: CHATS_SPACING.bigImageSize,
    width: CHATS_SPACING.bigImageSize,
  },
  mediumImage: {
    borderRadius: BORDER_RADIUS.m,
    height: CHATS_SPACING.mediumImageSize,
    width: CHATS_SPACING.mediumImageSize,
  },
  smallImage: {
    borderRadius: BORDER_RADIUS.m,
    height: CHATS_SPACING.smallImageSize,
    width: CHATS_SPACING.smallImageSize,
  },
});

export const getTileSizeStyle = (size: ImageSize): ImageStyle => {
  if (size === 'big') return sizeStyles.bigImage;
  if (size === 'medium') return sizeStyles.mediumImage;
  return sizeStyles.smallImage;
};

/** Container + error-overlay styles shared by both renderers. */
export const tileStyles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  errorContainer: {
    alignItems: 'center',
    borderRadius: BORDER_RADIUS.m,
    bottom: 0,
    justifyContent: 'center',
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    zIndex: 1,
  },
});
