import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconUserSearch} from '@tabler/icons-react-native';
import {
  Avatar,
  CardContainer,
  ListItemSkeleton,
  Skeleton,
  Title,
} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

const SKELETON_ARRAY = new Array(10).fill(null);

interface Props {
  hasFilters: boolean;
  isLoading: boolean;
}

function EmptyComponent({hasFilters, isLoading}: Props) {
  const {iconSizes, theme} = useTheme();
  const {t} = useTranslation();

  return isLoading ? (
    <Skeleton style={styles.skeletonContainer}>
      {SKELETON_ARRAY.map((_, index) => (
        <CardContainer key={index} style={styles.skeletonCardContainer}>
          <ListItemSkeleton
            withDescription={true}
            style={styles.skeletonItem}
          />
          <Skeleton.Item height={iconSizes.x5} />
        </CardContainer>
      ))}
    </Skeleton>
  ) : (
    <View
      style={[
        styles.emptyContainer,
        {
          borderColor: theme.border.neutral.default,
          backgroundColor: theme.background.layout.tertiary,
        },
      ]}>
      <Avatar Icon={IconUserSearch} variant="primary" />
      <Title
        center
        size="xs"
        title={t(
          `time_tracker.${hasFilters ? 'no_matched_results' : 'no_collabs'}`,
        )}
        descriptionNumberOfLines={4}
        description={t(
          `time_tracker.${
            hasFilters ? 'no_matched_results_description' : 'verify_settings'
          }`,
        )}
      />
    </View>
  );
}

export default EmptyComponent;