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 style={{flexDirection: 'row', marginTop: 30,justifyContent: "space-evenly"}}>
            <View style={styles.twoColContainer}>
              <Text style={[styles.twoColHeading]}>Past Houses</Text>
              <Text style={[styles.twoColNumber]}>3</Text>
            </View>
            <View style={styles.verticalLine} />
            <View style={styles.twoColContainer}>
              <Text style={[styles.twoColHeading]}>Requested</Text>
              <Text style={[styles.twoColNumber]}>5</Text>
            </View>
          </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: 'center',
    fontFamily: 'Ubuntu-Regular',
    paddingLeft: 10,
  },
  icon: {
    alignSelf: 'flex-start',
    marginLeft: '28%',
    flexDirection: 'row',
  },
  twoColContainer: {
    flexDirection: 'column',
    alignItems: 'center',
		marginLeft: -40,
  },
  twoColHeading: {
    color: '#1C254E',
    fontSize: 28,
    textAlign: 'left',
    fontFamily: 'Ubuntu-Regular',
  },
  twoColNumber: {
    textAlign: 'center',
    fontSize: 55,
    textAlign: 'left',
    fontFamily: 'Ubuntu-Regular',
    color: '#206ba5',
  },
  cardContainer: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    // justifyContent: 'center',
  },
  verticalLine: {
		marginLeft: -40,
    height: '100%',
    width: 5,
    backgroundColor: '#206ba5',
  },
});

export default UserProfile;