import React, {useState, useEffect} from 'react';
import {Icon, SearchBar} from 'react-native-elements';
import {
  StatusBar,
  Dimensions,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  FlatList,
  Image,
  ScrollView,
} 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,
  },
];
const SearchHouse = ({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}>
      <ScrollView>
          <View style={{width: '100%', backgroundColor: ''}}>
            <TouchableHighlight
              onPress={() => navigation.goBack()}
              underlayColor="white"
              activeOpacity={0.5}
              style={{position: 'absolute', top: 20, left: 10, zIndex: 1}}>
              <Icon
                name="arrow-back"
                type="ionicon"
                size={36}
                color="#206ba5"
              />
            </TouchableHighlight>
            <TouchableHighlight
              onPress={() => navigation.goBack()}
              underlayColor="white"
              activeOpacity={0.5}
              style={{position: 'absolute', top: 20, right: 10, zIndex: 1}}>
              <Icon
                name="settings-outline"
                type="ionicon"
                size={36}
                color="#206ba5"
              />
            </TouchableHighlight>
            <Image
              style={styles.imageStyle}
              source={require('../assets/house_1.jpg')}
            />
          </View>
          <View style={styles.headingContainer}>
            <Text style={styles.heading}>Prestige Villas</Text>
            <Text style={styles.subHeading}>This beautiful villa lies in a safe neighbourhood...</Text>

            <View style={{flexDirection: 'row', marginTop: 30}}>
              <Icon name="star" type="ionicon" size={36} color="gold" />
              <Text style={[styles.locationHeading]}>3.89</Text>
            </View>
            <View style={{flexDirection: 'row', marginTop: 30}}>
              <Icon
                name="location-outline"
                type="ionicon"
                size={36}
                color="#1C254E"
              />
              <Text style={[styles.locationHeading]}>Hyderabad, Telangana</Text>
            </View>
            <View
              style={{
                flexDirection: 'row',
                marginTop: 30,
                justifyContent: 'space-evenly',
              }}>
              <View style={styles.twoColContainer}>
                <Text style={[styles.twoColNumber]}>3</Text>
                <Text style={[styles.twoColHeading]}>bedrooms</Text>
              </View>
              <View style={styles.twoColContainer}>
                <Text style={[styles.twoColNumber]}>5</Text>
                <Text style={[styles.twoColHeading]}>baths</Text>
              </View>
              <View style={styles.twoColContainer}>
                <Text style={[styles.twoColNumber]}>5</Text>
                <Text style={[styles.twoColHeading]}>carparks</Text>
              </View>
            </View>
          </View>
      </ScrollView>
        </View>
    </>
  );
};
const styles = StyleSheet.create({
  viewRoot: {
    backgroundColor: '#ffffff',
		height: "100%",
    justifyContent: 'center',
    flex: 1,
  },
  iconContainer: {
    width: deviceWidth,
    position: 'absolute',
    zIndex: 1,
    opacity: 0.1,
    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: 45,
    textAlign: 'left',
    fontFamily: 'Ubuntu-Bold',
  },
  subHeading: {
    color: '#1C254E',
    fontSize: 20,
    textAlign: 'left',
    fontFamily: 'Ubuntu-Italic',
  },
  locationHeading: {
    color: '#1C254E',
    fontSize: 20,
    textAlign: 'left',
    fontFamily: 'Ubuntu',
    paddingLeft: 10,
  },
  icon: {
    alignSelf: 'flex-start',
    marginLeft: '28%',
    flexDirection: 'row',
  },
  cardContainer: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    // justifyContent: 'center',
  },
  twoColContainer: {
    flexDirection: 'column',
    alignItems: 'center',
    marginLeft: -40,
    borderWidth: 2,
    borderRadius: 20,
    padding: 10,
    borderColor: '#1C254E',
  },
  twoColNumber: {
    borderRadius: 50,
    width: 50,
    height: 50,
    padding: 10,
    textAlign: 'center',
    backgroundColor: '#1C254E',
    color: 'white',
    fontSize: 20,
  },
  twoColHeading: {
    color: '#1C254E',
    fontSize: 20,
    textAlign: 'left',
    fontFamily: 'Ubuntu-Regular',
  },
  imageStyle: {
    alignSelf: 'center',
  },
});

export default SearchHouse;