sg-delivery-customer/app/features/screens/supportChatScreen/supportChatScreen.styles.ts

import { StyleSheet } from 'react-native';
import { typography } from '@theme';

export const getStyles = (colors: any) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.background,
    },
    headerRight: {
      marginRight: 16,
    },
    statusBadge: {
      paddingHorizontal: 10,
      paddingVertical: 4,
      borderRadius: 12,
    },
    statusText: {
      fontSize: typography.fontSize.xs,
      fontWeight: typography.fontWeight.bold,
    },
    ticketInfoBar: {
      paddingHorizontal: 16,
      paddingVertical: 12,
      backgroundColor: colors.cardBg,
      borderBottomWidth: 1,
      borderBottomColor: colors.border,
    },
    ticketSubject: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      marginBottom: 4,
    },
    ticketMeta: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
    },
    chatList: {
      padding: 16,
      paddingBottom: 24,
    },
    messageRow: {
      flexDirection: 'row',
      marginBottom: 16,
      width: '100%',
    },
    customerRow: {
      justifyContent: 'flex-end',
    },
    agentRow: {
      justifyContent: 'flex-start',
    },
    bubble: {
      maxWidth: '75%',
      borderRadius: 16,
      paddingHorizontal: 14,
      paddingVertical: 10,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.05,
      shadowRadius: 2,
      elevation: 1,
    },
    customerBubble: {
      backgroundColor: colors.primary,
      borderBottomRightRadius: 2,
    },
    agentBubble: {
      backgroundColor: colors.cardBg,
      borderBottomLeftRadius: 2,
      borderWidth: 1,
      borderColor: colors.border,
    },
    senderName: {
      fontSize: 11,
      fontWeight: typography.fontWeight.semibold,
      color: colors.textSecondary,
      marginBottom: 4,
    },
    messageText: {
      fontSize: typography.fontSize.sm,
      lineHeight: 20,
    },
    customerText: {
      color: '#FFFFFF',
    },
    agentText: {
      color: colors.text,
    },
    timeText: {
      fontSize: 9,
      marginTop: 4,
      textAlign: 'right',
    },
    customerTime: {
      color: 'rgba(255,255,255,0.7)',
    },
    agentTime: {
      color: colors.textSecondary,
    },
    attachmentImage: {
      width: 200,
      height: 150,
      borderRadius: 8,
      marginBottom: 4,
    },
    typingContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 16,
      paddingVertical: 8,
      backgroundColor: colors.background,
    },
    typingText: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      fontStyle: 'italic',
      marginLeft: 6,
    },
    inputContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 12,
      paddingVertical: 10,
      backgroundColor: colors.cardBg,
      borderTopWidth: 1,
      borderTopColor: colors.border,
    },
    attachmentBtn: {
      padding: 8,
      marginRight: 4,
      justifyContent: 'center',
      alignItems: 'center',
    },
    input: {
      flex: 1,
      minHeight: 40,
      maxHeight: 100,
      backgroundColor: colors.background,
      borderWidth: 1,
      borderColor: colors.border,
      borderRadius: 20,
      paddingHorizontal: 16,
      paddingVertical: 8,
      fontSize: typography.fontSize.sm,
      color: colors.text,
      marginRight: 8,
    },
    sendBtn: {
      width: 40,
      height: 40,
      borderRadius: 20,
      backgroundColor: colors.primary,
      justifyContent: 'center',
      alignItems: 'center',
    },
    sendBtnDisabled: {
      backgroundColor: colors.border,
    },
    sendIcon: {
      fontSize: 16,
      color: '#FFFFFF',
    },
    previewContainer: {
      flexDirection: 'row',
      padding: 12,
      backgroundColor: colors.cardBg,
      borderTopWidth: 1,
      borderTopColor: colors.border,
    },
    previewImageWrapper: {
      position: 'relative',
      marginRight: 12,
    },
    previewImage: {
      width: 80,
      height: 80,
      borderRadius: 8,
    },
    removePreviewBtn: {
      position: 'absolute',
      top: -6,
      right: -6,
      backgroundColor: '#FF3B30',
      width: 20,
      height: 20,
      borderRadius: 10,
      justifyContent: 'center',
      alignItems: 'center',
      borderWidth: 1,
      borderColor: '#FFFFFF',
    },
    removePreviewText: {
      color: '#FFFFFF',
      fontSize: 10,
      fontWeight: 'bold',
    },
    reopenContainer: {
      padding: 16,
      backgroundColor: colors.cardBg,
      borderTopWidth: 1,
      borderTopColor: colors.border,
      alignItems: 'center',
    },
    reopenTitle: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.semibold,
      color: colors.textSecondary,
      marginBottom: 10,
      textAlign: 'center',
    },
    reopenBtn: {
      paddingHorizontal: 24,
      paddingVertical: 12,
      backgroundColor: colors.primary,
      borderRadius: 24,
      width: '100%',
      alignItems: 'center',
    },
    reopenBtnText: {
      color: '#FFFFFF',
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.bold,
    },
    loadingContainer: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    loadingText: {
      marginTop: 12,
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
    },
  });