import {StyleSheet, ViewStyle} from 'react-native';
import {
  CONVERSATION_ITEM_AVATAR_SIZE,
  CONVERSATION_SEPARATOR_HEIGHT,
} from '@modules/chats/constants';
import {SPACING} from '@shared/theme';
import {windowDimensions} from '@shared/constants';

const commonDividerStyle: ViewStyle = {
  alignSelf: 'flex-end',
  height: CONVERSATION_SEPARATOR_HEIGHT,
  width: '100%',
};

const PADDING_H = SPACING.x2;
const AVATAR_TITLE_GAP = SPACING.x1;

export const styles = StyleSheet.create({
  container: {flex: 1},
  contentContainer: {flexGrow: 1},
  sectionTitle: {
    paddingHorizontal: SPACING.x2,
    paddingTop: SPACING.x3,
  },
  skeletonContainer: {
    paddingHorizontal: SPACING.x2,
    paddingTop: SPACING.x3,
  },
  emptyState: {height: (windowDimensions.height * 2) / 3},
  dividerChatItem: {
    ...commonDividerStyle,
    paddingLeft: PADDING_H + CONVERSATION_ITEM_AVATAR_SIZE + AVATAR_TITLE_GAP,
  },
  dividerUserItem: {
    ...commonDividerStyle,
    paddingHorizontal: PADDING_H,
  },
});
