import React, {useState, useEffect} from 'react';
import {
  StatusBar,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  ScrollView,
  Dimensions,
  TouchableOpacity,
  FlatList,
} from 'react-native';
import {Icon} from 'react-native-elements';
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}) => {
  return (
    <>
      <StatusBar backgroundColor="#ffffff" barStyle="dark-content" />
      <View style={styles.viewRoot}>
        <View style={styles.iconContainer}>
          <TouchableHighlight
            onPress={() => navigation.goBack()}
            style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
            <Icon name="arrow-back" type="ionicon" size={36} color="#206ba5" />
          </TouchableHighlight>
          <TouchableHighlight
            onPress={() => navigation.goBack()}
            style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
            <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={restaurant => restaurant.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;