import React, {useState, useEffect} from 'react';
import {Icon, SearchBar} from 'react-native-elements';
import {StatusBar, Dimensions, StyleSheet, Text, View, TouchableHighlight,FlatList} from 'react-native';
import HouseCard from './helpers/HouseCard';

const deviceWidth = Math.round(Dimensions.get('window').width);

const homes = [
  {
    name: 'Prestiage Villas',
    categories: 'Desserts, Cakes and Bakery',
    deliveryTime: '35 min',
    distance: '3.7 km',
    image: require('../assets/house_1.jpg'),
    id: 1,
  },
  {
    name: 'lakeView Apartment 203',
    categories: 'Beverages, Desserts, Cakes and Bakery',
    deliveryTime: '45 min',
    distance: '4.3 km',
    image: require('../assets/house_2.jpg'),
    id: 2,
  },
  {
    name: 'Central Villas',
    categories: 'Cakes and Bakery, American, Sandwiches, Burgers',
    deliveryTime: '25 min',
    distance: '3 km',
    image: require('../assets/house_1.jpg'),
    id: 3,
  },
  {
    name: 'grand flat 405',
    categories: 'Fast Food, Burgers, Desserts',
    deliveryTime: '20 min',
    distance: '2.5 km',
    image: require('../assets/house_2.jpg'),
    id: 4,
  },
  {
    name: 'exlusive villa',
    categories: 'Fast Food, Burgers, Desserts',
    deliveryTime: '25 min',
    distance: '3.1 km',
    image: require('../assets/house_1.jpg'),
    id: 5,
  },
];
const UserProfile = ({navigation}) => {
	const [search,setSearch] = React.useState("")
	const [loading,setLoading] = React.useState(false)
	const [searchData,setSearchData] = React.useState([])
	const [tempSearchData,setTempSearchData] = React.useState([])
	const [error,setError] = React.useState(null)
  const renderHeader = () => {
    return (
      <SearchBar
        placeholder="Search Here..."
        lightTheme
        round
        editable={true}
        value={search}
        onChangeText={setSearch}
	platform="android"
      />
    );
  };
const updateSearch = search => {
        this.setState({ search }, () => {
            if ('' == search) {
                this.setState({
                    data: [...this.state.temp]
                });
                return;
            }
             
            this.state.data = this.state.temp.filter(function(item){
                return item.name.includes(search);
              }).map(function({id, name, email}){
                return {id, name, email};
            });
        });
  };
  return (
    <>
      <StatusBar backgroundColor="#ffffff" barStyle="dark-content" />
      <View style={styles.viewRoot}>
        <View style={styles.iconContainer}>
          <TouchableHighlight
            onPress={() => navigation.goBack()}
underlayColor="white"
						activeOpacity={0.5}
            >
            <Icon name="arrow-back" type="ionicon" size={36} color="#206ba5" />
          </TouchableHighlight>
          <TouchableHighlight
            onPress={() => navigation.goBack()}
underlayColor="white"
						activeOpacity={0.5}
            >
            <Icon
              name="settings-outline"
              type="ionicon"
              size={36}
              color="#206ba5"
            />
          </TouchableHighlight>
        </View>
        <View style={styles.headingContainer}>
          <Text style={styles.heading}>John Doe</Text>
          <Text style={styles.subHeading}>Tenant</Text>

          <View style={{flexDirection: 'row', marginTop: 30}}>
            <Icon name="card-outline" type="ionicon" size={36} color="brown" />
            <Text style={[styles.pricingHeading]}>Basic Member</Text>
          </View>
        </View>
        <View style={styles.cardContainer}>
          {/* <Card /> */}
          <StatusBar barStyle="dark-content" />

          <FlatList
            data={homes}
            renderItem={({item}) => {
              return <HouseCard info={item} />;
            }}
            keyExtractor={house => house.id.toString()}
            showsVerticalScrollIndicator={false}
          />
        </View>
      </View>
    </>
  );
};
const styles = StyleSheet.create({
  viewRoot: {
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    height: '100%',
    flex: 1,
  },
  iconContainer: {
    width: deviceWidth,
    height: 60,
    backgroundColor: 'white',
    justifyContent: 'space-between',
    paddingBottom: 20,
    paddingLeft: 5,
    paddingRight: 5,
    flexDirection: 'row',
  },
  labelStyle: {
    fontSize: 24,
    fontWeight: '700',
  },
  headingContainer: {
    marginLeft: 20,
  },
  heading: {
    color: '#1C254E',
    fontSize: 60,
    textAlign: 'left',
    fontFamily: 'Ubuntu-Bold',
  },
  subHeading: {
    color: '#1C254E',
    fontSize: 30,
    textAlign: 'left',
    fontFamily: 'Ubuntu-Regular',
  },
  pricingHeading: {
    color: 'brown',
    fontSize: 30,
    textAlign: 'left',
    fontFamily: 'Ubuntu-Regular',
    paddingLeft: 10,
  },
  icon: {
    alignSelf: 'flex-start',
    marginLeft: '28%',
    flexDirection: 'row',
  },
  cardContainer: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    // justifyContent: 'center',
  },
});

export default UserProfile;