/* eslint-disable react/self-closing-comp */
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react-native/no-inline-styles */
import React, {useState, Suspense} from 'react';
import {
  Image,
  Modal,
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';
import LoadingProgress from '../../components/LoadingProgress';
import Moment from 'moment';
import {IMAGES, IcNotificationList, IconDrawer} from '../../values/images';
import {ScrollView} from 'react-native-virtualized-view';
import styles from './style';
import ButtonComponent from '../../components/ButtonComponent';
import Alert from 'react-native-awesome-alerts';
import {SwipeListView} from 'react-native-swipe-list-view';
const NotificationScreen = ({
  userDetails,
  notiList,
  readNotification,
  isLoading,
  calculateTimeNoti,
  onDeleteNotification,
  showAlert,
  onConfirmDelete,
  hideAlert,
  onChangeTab,
  onRefreshList,
  onLoadMore,
  arrBtnHeader,
  loadBadgeNotification,
}) => {
  //console.log('notiList', notiList);
  const renderItem = ({item, index}) => {
    //console.log(item)
    return (
      <TouchableOpacity
        key={item.id + index}
        onPress={() => readNotification(item, index)}
        style={[styles.item, {backgroundColor: 'white'}]}>
        <Image
          source={{uri: 'https://meu.anawork.com' + item.extend_avatar}}
          style={{...styles.imgAvatar, marginRight: 5}}
        />
        <View
          style={{
            justifyContent: 'center',
            marginRight: 10,
            flex: 4,
          }}>
          <Text style={{color: '#5d78ff', fontWeight: '500'}}>
            {item.summary}
          </Text>
          <Text style={styles.title}>{`${item.details}`}</Text>
          <Text style={{fontSize: 10}}>
            {calculateTimeNoti(item.created_at)}
          </Text>
        </View>
        <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
          {
            <Image
              source={
                !item.read
                  ? IcNotificationList.IcStatusOff
                  : IcNotificationList.IcStatusDone
              }
              style={styles.iconStatus}
            />
          }
        </View>
      </TouchableOpacity>
    );
  };
  const renderHiddenItem = ({item, index}) => {
    return (
      <ButtonComponent
        style={styles.hiddenItem}
        onPress={() => onDeleteNotification(item, index)}
        iconSource={IcNotificationList.IcTrash}
        styleIcon={{width: 20, height: 20}}
      />
    );
  };
  
  //console.log(notiList);
  return (
    <SafeAreaView>
      <ScrollView nestedScrollEnabled={true}>
        <View style={styles.headerView}>
          {arrBtnHeader &&
            arrBtnHeader.map((item, index) => {
              return (
                <ButtonComponent
                  key={item.icon}
                  style={[
                    styles.viewIconHeader,
                    {
                      backgroundColor: item.isSelected ? '#5d78ff' : '#f1f1f1',
                    },
                  ]}
                  iconSource={item.isSelected ? item.iconActive : item.icon}
                  styleIcon={{width: 25, height: 25, alignSelf: 'center'}}
                  onPress={() => onChangeTab(item.type, item.tab, index, item)}
                  badge={(item.unread && item.unread) || '0'}
                  badgeStyle={styles.viewBadge}
                />
              );
            })}
        </View>
        <Text style={styles.titleHeader}>Tất cả</Text>
        <View>
          {notiList && (
            <SwipeListView
              data={notiList}
              renderItem={renderItem}
              renderHiddenItem={renderHiddenItem}
              rightOpenValue={-75}
              onRefresh={onRefreshList}
            />
          )}
          {notiList && notiList.length > 0 && (
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                marginBottom: 30,
              }}>
              <ButtonComponent
                style={{
                  padding: 10,
                  borderWidth: 1,
                  borderColor: '#5d78ff',
                  width: '40%',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                onPress={onLoadMore}
                text={'Xem thêm'}
                textStyle={{color: '#5d78ff'}}
              />
            </View>
          )}
        </View>
        {isLoading && <LoadingProgress />}
        {showAlert && (
          <Alert
            show={showAlert.isError}
            showProgress={false}
            title={showAlert.title}
            message={showAlert.message}
            closeOnTouchOutside={true}
            closeOnHardwareBackPress={false}
            showConfirmButton={true}
            showCancelButton={true}
            cancelText={'Đóng'}
            confirmText="Xóa"
            confirmButtonColor="#DD6B55"
            onConfirmPressed={onConfirmDelete}
            onCancelPressed={hideAlert}
          />
        )}
      </ScrollView>
    </SafeAreaView>
  );
};

export default NotificationScreen;
