import React from 'react';
import { TouchableOpacity, View, TouchableWithoutFeedback, Text } from 'react-native';
import { RFValue } from 'react-native-responsive-fontsize';
import SearchInput from 'react-native-search-filter';
import { Icon } from 'components';
import { Colors } from 'global-styles';
import styles from './styles';
import { ScrollView } from 'react-native-gesture-handler';

const SearchIcon = (props) => (
  <TouchableWithoutFeedback onPress={props.close}>
      <Icon name="search" type='Feather' style={{
          fontSize:RFValue(18),
          color: props.cus ? '#E0E0E0' : '#E1E1E1',
          marginRight:RFValue(-5),
          marginTop: 2
      }}/>
  </TouchableWithoutFeedback>
)

const SearchIconRemove = () => (
  <View style={styles.searchRemove}>
      <Icon name="close" type='AntDesign' style={{fontSize:RFValue(8),color : Colors.WHITE}}/>
  </View>
)

const FilterTab = ({ data, filter, onPress, secondary }) => (
  <View style={{ height: RFValue(35), flexDirection: 'row', backgroundColor: secondary ? Colors.WHITE : Colors.SECONDARY }}>
    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
      {data.map((item, index) => (
        <TouchableOpacity 
          activeOpacity={0.5} 
          style={{ 
            paddingHorizontal: RFValue(15), 
            justifyContent: 'center', 
            borderBottomWidth: RFValue(3), 
            borderColor: index == filter ? (secondary ? Colors.PRIMARY : 'blue') : (secondary ? Colors.WHITE : Colors.PRIMARY)
          }}
          onPress={() => onPress({ index: index, item: item})}
        >
          <Text style={{ color: 'black'}}>{item.name}</Text>
        </TouchableOpacity>
      ))}
    </ScrollView>
  </View>
)

const SellHeader = ({setSearch, searchValue, navigation, categories}) => (
  <View style={{elevation: 1, backgroundColor: Colors.SECONDARY}}>
    <View
      style={{
        flexDirection: 'row',
        height: RFValue(45),
        paddingRight: RFValue(5),
      }}>
      <TouchableOpacity
        activeOpacity={0.5}
        style={{
          width: RFValue(30),
          marginHorizontal: RFValue(5),
          justifyContent: 'center',
          alignItems: 'center',
        }}
        onPress={() => navigation.goBack()}>
        <Icon
          name="chevron-left"
          type="Feather"
          style={{
            color: Colors.WHITE,
            // marginLeft: RFValue(-20),
            fontSize: RFValue(18),
          }}
        />
      </TouchableOpacity>
      <View style={{flex: 1, justifyContent: 'center'}}>
        <SearchInput
          inputViewStyles={{backgroundColor: Colors.PRIMARY, borderRadius: 7}}
          onChangeText={setSearch}
          placeholder={'Cari produk...'}
          placeholderTextColor={Colors.WHITE}
          style={styles.searchBar}
          clearIconViewStyles={styles.searchIconRemove}
          clearIcon={
            searchValue != '' ? <SearchIconRemove /> : <SearchIcon cus />
          }
        />
      </View>
      <TouchableOpacity
        activeOpacity={0.5}
        style={styles.buttonFilter}
        onPress={() => alert('barcode')}>
        <Icon
          name="barcode-scan"
          type="MaterialCommunityIcons"
          style={styles.iconBarcode}
        />
      </TouchableOpacity>
      {/* <CashierKeep navigation={this.props.navigation} /> */}
    </View>
    <FilterTab 
      data={categories}
      onPress={(index, item) => alert(index, item)}
    />
  </View>
);

export default SellHeader;