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

const REPLY_WITH_ASSET_MIN_WIDTH = 180;
const BUBBLE_WITH_REPLY_MIN_WIDTH = 150;

export const styles = StyleSheet.create({
  container: {
    paddingHorizontal: CHATS_SPACING.itemHorizontalPadding,
    width: '100%',
  },
  rowContainer: {
    flexDirection: 'row',
    gap: CHATS_SPACING.gap,
    justifyContent: 'flex-start',
  },
  rightContainer: {flexDirection: 'row-reverse'},
  bubble: {
    borderRadius: BORDER_RADIUS.l,
    borderWidth: 1,
    gap: CHATS_SPACING.smallGap,
    minWidth: 100,
    paddingHorizontal: CHATS_SPACING.bubbleHorizontalPadding,
    paddingVertical: CHATS_SPACING.bubbleVerticalPadding,
  },
  bubbleWithReply: {minWidth: BUBBLE_WITH_REPLY_MIN_WIDTH},
  username: {lineHeight: CHATS_SPACING.usernameLineHeight},
  messageContainer: {
    flexDirection: 'row',
    gap: SPACING.x1,
  },
  bubblefooter: {
    alignItems: 'center',
    alignSelf: 'flex-end',
    flexDirection: 'row',
    gap: SPACING['x0.5'],
    marginLeft: 'auto',
  },
  avatarContainer: {width: CHATS_SPACING.avatarHeight},

  replyMessageContainer: {
    borderRadius: BORDER_RADIUS.m,
    flexDirection: 'row',
    gap: SPACING.x1,
    height: CHATS_SPACING.replyHeight,
    overflow: 'hidden',
    padding: CHATS_SPACING.gap,
  },
  replyWithAttachment: {minWidth: REPLY_WITH_ASSET_MIN_WIDTH},
  flex: {flex: 1},
  replyMessageIconContainer: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: SPACING['x0.5'],
  },
  replyMessageImage: {
    aspectRatio: 1,
    height: CHATS_SPACING.replyHeight,
    width: undefined,
  },
  fowardLabelContainer: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: SPACING['x0.25'],
    height: CHATS_SPACING.forwardedLabelHeight,
  },
  previewContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: -CHATS_SPACING.gap,
  },
  errorMessageContainer: {
    alignItems: 'flex-end',
    flexDirection: 'row',
    gap: SPACING.x1,
    height: CHATS_SPACING.errorMessageHeight,
    justifyContent: 'flex-end',
    overflow: 'hidden',
    width: '100%',
  },
});
