import React, {useState} from 'react';
import {
  Text,
  TouchableOpacity,
  FlatList,
  View,
  TextInput,
} from 'react-native';
import Header from '../../components/Header/Header';
import I18n from '../../helper/i18/i18n';
import R from '../../assets/R';
import ItemList from './item';
import styles from './style';

const DebtView = props => {
  const {onTabChange, dataListStatus, dataListDebtItem, activeTab, timeDebt} =
    props;
  const IconSearch = R.images.icSearch;
  const renderTabViewItem = ({item}) => {
    const isActive = activeTab === item.key;
    return (
      <TouchableOpacity
        style={[styles.tab_button, isActive && styles.tabButtonActive]}
        onPress={() => onTabChange(item.key)}>
        <Text
          style={[
            styles.tabButtonText,
            isActive && styles.tabButtonTextActive,
          ]}>
          {item.title_status}
        </Text>
      </TouchableOpacity>
    );
  };
  const renderItem = ({item}) => {
    return <ItemList item={item} onPayPress={props.onPayPress} />;
  };
  const filteredDebtItems = dataListDebtItem.filter(
    item => item.status === activeTab,
  );

  return (
    <View style={styles.container}>
      <Header isBack title={I18n.t('Debt')} />

      <View style={styles.tab_container}>
        <FlatList
          data={dataListStatus}
          renderItem={renderTabViewItem}
          keyExtractor={item => item.key}
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={styles.tab_scroll_content}
        />
      </View>
      <View
        style={{
          marginHorizontal: 15,
          flexDirection: 'row',
          alignItems: 'center',
          borderWidth: 1,
          borderColor: R.colors.gray400,
          borderRadius: 50,
          padding: 0,
          maxHeight: 40,
          paddingHorizontal: 10,
          marginVertical: 5,
        }}>
        <IconSearch width={20} height={20} stroke={R.colors.gray400} />
        <TextInput
          placeholder={'Tìm kiếm'}
          style={styles.input}
          placeholderTextColor={R.colors.gray400}
        />
      </View>

      <Text style={styles.sub_text}>{props.timeDebt}</Text>

      <FlatList
        data={filteredDebtItems}
        renderItem={renderItem}
        showsVerticalScrollIndicator={false}
        keyExtractor={item => item.id.toString()}
      />
    </View>
  );
};

export default DebtView;
