import React from 'react';
import {StyleSheet, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import Text from '@components/Text';
import Icon from '@components/Icon';
import {useAppSelector} from '@redux/utils';
import {SPACING} from '@shared/theme';
import {COLORS} from '@shared/colors';

interface Props {
  isArchivedList?: boolean;
}

export function EmptyChats({isArchivedList}: Props) {
  const {t} = useTranslation();

  const canViewRegularChats = useAppSelector(
    ({user}) => user.permissions.VIEW_REGULAR_CHATS,
  );
  const canViewTickets = useAppSelector(
    ({user}) => user.permissions.VIEW_TICKETS,
  );

  return (
    <View style={styles.container}>
      <Icon name="chat" size="xl" color={COLORS.DARKEST_GRAY} />
      <Text variant="h6" weight="regular" color={COLORS.DARKEST_GRAY}>
        {t(
          isArchivedList
            ? 'chats.no_results'
            : canViewRegularChats && canViewTickets
            ? 'chats.no_chats_and_tickets'
            : canViewTickets
            ? 'chats.no_ticket_results'
            : 'chats.no_results',
        )}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    gap: SPACING.x2,
    paddingTop: SPACING.x10,
  },
});