EmptyStateIndicator.tsx

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { useTheme } from '../../contexts/themeContext/ThemeContext';
import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
import { useViewport } from '../../hooks/useViewport';
import { ChatIcon, MessageIcon } from '../../icons';

const styles = StyleSheet.create({
  channelContainer: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
  },
  channelDetails: {
    fontSize: 14,
    textAlign: 'center',
  },
  channelTitle: {
    fontSize: 16,
    paddingBottom: 8,
    paddingTop: 16,
  },
  messageContainer: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
  },
  messageTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    paddingBottom: 8,
  },
});

export type EmptyStateProps = {
  listType?: 'channel' | 'message' | 'default';
};

export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
  const {
    theme: {
      colors: { black, grey, grey_gainsboro },
      emptyStateIndicator: { channelContainer, channelDetails, channelTitle },
    },
  } = useTheme();
  const { vw } = useViewport();
  const width = vw(33);
  const { t } = useTranslationContext();

  switch (listType) {
    case 'channel':
      return (
        <View style={[styles.channelContainer, channelContainer]}>
          <MessageIcon height={width} pathFill={grey_gainsboro} width={width} />
          <Text
            style={[styles.channelTitle, { color: black }, channelTitle]}
            testID='empty-channel-state-title'
          >
            {t<string>("Let's start chatting!")}
          </Text>
          <Text
            style={[styles.channelDetails, { color: grey, width: vw(66) }, channelDetails]}
            testID='empty-channel-state-details'
          >
            {t<string>('How about sending your first message to a friend?')}
          </Text>
        </View>
      );
    case 'message':
      return (
        <View style={[styles.messageContainer]}>
          <ChatIcon height={width} pathFill={grey_gainsboro} width={width} />
          <Text style={[styles.messageTitle, { color: grey_gainsboro }]}>
            {t<string>('No chats here yet…')}
          </Text>
        </View>
      );
    default:
      return <Text style={{ color: black }}>No items exist</Text>;
  }
};