import React, {useCallback} from 'react';
import {TouchableOpacity, FlatList} from 'react-native';
import EmptyListPlaceholder from '@components/EmptyListPlaceholder';
import {IconName} from '@components/Icon';
import ActivityIndicator from '@components/ActivityIndicator';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {Icon as IconType} from '@interfaces/icon';

import TrainingItem from './components/TrainingItem';
import {styles} from './styles';

type DefaultItem = {
  id: number;
  title?: string;
  icon?: IconType | string;
  newSections?: number;
};

interface Props<T> {
  items: T[];
  loading: boolean;
  emptyText: string;
  onPress: (item: T) => void;
  emptyIcon?: IconName;
}

/**
 * @deprecated Delete after old trainings and onboarding modules are removed
 */
function TrainingList<T extends DefaultItem = DefaultItem>({
  items,
  loading,
  emptyText,
  onPress,
  emptyIcon = 'article',
}: Props<T>) {
  const bottom = useSafeAreaBottomPadding();

  const keyExtractor = useCallback((item: T) => `${item.id}`, []);

  const renderItem = useCallback(
    ({item}: {item: T}) => (
      <TouchableOpacity onPress={() => onPress(item)}>
        <TrainingItem
          title={item.title || ''}
          {...(item.icon && {icon: item.icon})}
          unreadMessages={item.newSections}
        />
      </TouchableOpacity>
    ),
    [onPress],
  );

  return (
    <FlatList
      data={items}
      keyExtractor={keyExtractor}
      showsVerticalScrollIndicator={false}
      contentContainerStyle={[styles.contentList, {paddingBottom: bottom}]}
      ListEmptyComponent={
        loading ? (
          <ActivityIndicator style={styles.loading} />
        ) : (
          <EmptyListPlaceholder
            icon={emptyIcon}
            message={emptyText}
            customStyle={styles.emptyText}
          />
        )
      }
      renderItem={renderItem}
    />
  );
}

export default TrainingList;