import React from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  FlatList,
  Image,
  TextInput,
} from 'react-native';
import Header from '../../components/Header/Header';
import styles from './style';
import R from '../../assets/R';
const NotificationView = props => {
  const {
    dataTitleListTabView,
    activeTab,
    onTabChange,
    dataNotifi,
    getEmptyMessage,
    searchText,
    onSearchChange,
  } = props;

  //TabView
  const renderTabViewItem = ({item}) => {
    const isActivity = activeTab === item.key;
    return (
      <TouchableOpacity
        style={[styles.tabButtonItem, isActivity && styles.tabButtonActiveItem]}
        onPress={() => onTabChange(item.key)}>
        <Text style={styles.textTabView}>{item.title}</Text>
      </TouchableOpacity>
    );
  };
  const renderListTabView = () => {
    return (
      <View style={styles.tabButtonContainer}>
        <FlatList
          data={dataTitleListTabView}
          renderItem={renderTabViewItem}
          horizontal
          keyExtractor={(item, index) => `${activeTab}-${index}`}
          showsHorizontalScrollIndicator={false}
        />
      </View>
    );
  };
  //Search
  const renderSearchBox = () => {
    return (
      <View style={styles.containerSearchBox}>
        <View style={styles.boxIconSearch}>
          <Image
            source={R.images.icSearchHeader}
            maxWidth={Platform.OS === 'ios' ? 16: 20}
            maxHeight={Platform.OS === 'ios' ? 16 : 20}
            resizeMode="contain"
            tintColor={R.colors.gray}
          />
        </View>
        <TextInput
          placeholder="Tìm kiếm"
          value={searchText}
          onChangeText={onSearchChange}
          placeholderTextColor={R.colors.gray}
          color={R.colors.black}
          style={styles.inputSearch}
        />
      </View>
    );
  };
  //List Notification
  const renderNotificationItem = ({item}) => {
    return (
      <View style={styles.cardItem}>
        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.title_notifi}</Text>
        <Text style={styles.text} numberOfLines={2} ellipsizeMode="tail">{item.message}</Text>
        <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.time}</Text>

      </View>
    );
  };
  const renderListNotification = () => {
    return (
        <FlatList
          data={dataNotifi[activeTab] || []}
          renderItem={renderNotificationItem}
          keyExtractor={(item, index) => `${activeTab}-${index}`}
          showsVerticalScrollIndicator={false}
          vertical
        />
    );
  };
  //Empty
  const renderItemEmpty = () => {
    return (
      <View style={styles.containerEmpty}>
        <Image source={R.images.icNoData} maxWidth={50} maxHeight={50} />
        <Text style={styles.textEmpty}>{getEmptyMessage(activeTab)}</Text>
      </View>
    );
  };
  return (
    <View style={styles.safeArea}>
      <Header title={'Thông báo'} />
      {renderListTabView()}
      <View style={styles.containerBody}>
      {(dataNotifi[activeTab] && dataNotifi[activeTab].length > 0) && renderSearchBox()}
      
      {dataNotifi[activeTab].length === 0 ? renderItemEmpty(): renderListNotification()}
      </View>
    </View>
  );
};

export default NotificationView;
