import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Image,
  TextInput,
  FlatList,
} from 'react-native';
import {
  createStackNavigator,
  CardStyleInterpolators,
} from 'react-navigation-stack';
import building from '../../services/building';
import ApartmentNameSearchList from './apartmentNameSearchList';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {colors} from '../../assets/styles/colors-theme';
import {Fonts} from '../../assets/styles/fonts-theme';
import history from '../../common/history';
import NaviBar from '../../components/navi-bar';
import Toast, {DURATION} from 'react-native-easy-toast';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import Migrations from '../../services/realm/Mirgrations';
import {inject, observer} from 'mobx-react';
import {queryUser} from '../../services/realm/realmManger';
import Swiper from 'react-native-swiper';
import Global from '../../services/Global';
import AddFunction from '../../common/addFunction';
import {width, height} from '../../common/screen';
import {observable} from 'mobx';
@inject('appStore')
@observer
export default class ApartmentNameAddressEdit extends Component {
  @observable
  searchResult = [];
  constructor(props) {
    super(props);
    this.store = props.appStore;
    Global.instance = this;
  }
  static navigationOptions = {
    gesturesEnabled: false,
    cardStyleInterpolator: props =>
      CardStyleInterpolators.forVerticalIOS(props),
  };

  renderIcon(items) {
    return (
      <TouchableOpacity
        style={{justifyContent: 'center', alignItems: 'center'}}>
        <Icon name={items.icon} size={50} solid color={colors.mainColor} />
        <Text style={{fontFamily: Fonts.ubuntu, marginTop: 10}}>
          {items.title}
        </Text>
      </TouchableOpacity>
    );
  }

  async clickAction(which) {
    switch (which) {
      case 0:
        await history.goBack(this);
        await history.push(this, '/apartmentDetails', {create: true});
        break;
      case 1:
        if (this.store.logined) {
          if (this.store.loginUserData.data.member.hasOwnProperty('sign')) {
            await history.goBack(this);
            await history.push(this, '/selectApartment');
          } else {
            this.refs.toast.show('Please upload the signature');
          }
        } else {
          this.refs.toast.show('Please Login');
        }

        break;
    }
  }
  componentDidMount() {}

  // renderBuilding(){
  //   if(this.store.user.memberType == 0){
  //     return(
  //       <TouchableOpacity style = {styles.iconView}
  //       onPress = {()=>{this.clickAction(0)}}>
  //      <Icon name = 'building' size = {50} solid color={colors.mainColor}/>
  //      <Text style = {styles.text}>
  //        {this.store.text.addApartment}
  //      </Text>
  //     </TouchableOpacity>
  //     )
  //   }else{
  //     return null
  //   }
  // }

  SearchFilterFunction(text) {
    //passing the inserted text in textinput
    const newData = building.filter(function(item) {
      //applying filter for the inserted text in search bar
      const itemData = item.building;
      const textData = text;
      return itemData.indexOf(textData) > -1;
    });
    this.searchResult = [...newData];
    if (text.length == 0) {
      this.searchResult = [];
    }
    this.store.apartmentData.name = text;
  }

  render() {
    const object = [
      {icon: 'building', title: this.store.text.addApartment},
      {icon: 'file-contract', title: this.store.text.addContract},
    ];
    return (
      <View style={{flex: 1, alignItems: 'center', backgroundColor: 'white'}}>
        <TouchableOpacity
          style={{
            position: 'absolute',
            top: 10,
            left: 10,
            height: 40,
            width: 40,
            justifyContent: 'center',
            alignItems: 'center',
          }}
          onPress={() => {
            history.goBack(this);
          }}>
          <Icon name="times" color={colors.mainColor} size={20} />
        </TouchableOpacity>
        <View
          style={{
            //borderBottomColor: colors.textColor,
            // borderBottomWidth: 1,
            marginTop: 40,
            height: verticalScale(40),
            borderRadius: 5,
            flexDirection: 'row',
            width: width - 40,
            alignItems: 'space-between',
          }}>
          <View
            style={{
              flexDirection: 'row',
              borderBottomColor: colors.mainColor,
              flex: 1,
              borderBottomWidth: 1,
            }}>
            <TextInput
              underlineColorAndroid="rgba(0,0,0,0)"
              keyboardType={'default'}
              autoFocus={true}
              onChangeText={text => this.SearchFilterFunction(text)}
              placeholderStyle={{fontFamily: Fonts.ubuntuL}}
              placeholderTextColor={colors.textColor}
              placeholder={this.store.text.apartment}
              returnKeyType={'done'}
              onSubmitEditing={() => {
                history.goBack(this);
              }}
              value={this.store.apartmentData.name}
              style={{
                color: colors.textColor,
                fontSize: 15,
                fontFamily: Fonts.ubuntuL,
                marginBottom: Platform.OS === 'ios' ? 3 : 0,
                flex: 1,
                justifyContent: 'flex-end',
                alignItems: 'center',
                flexDirection: 'row',
                paddingVertical: 0,
              }}
            />
            <TouchableOpacity style = {{width:70,justifyContent: 'center',alignItems:'flex-end'}}
            onPress = {()=>{ history.goBack(this)}}>
            <Icon name = 'greater-than'color = {colors.mainColor} size = {15}/>
            </TouchableOpacity>
          </View>
        </View>
        <FlatList
          data={this.searchResult}
          renderItem={({item}) => (
            <ApartmentNameSearchList
              items={item}
              onPress={() => {
                this.store.apartmentData.name = item.building;
                this.store.apartmentData.address = item.address;
                history.goBack(this);
                //  history.push(this, '/propertyDetails', {rentData: item});
              }}
            />
          )}
          keyExtractor={item => item.id}
        />
        <Toast
          ref="toast"
          style={{backgroundColor: colors.mainColor}}
          position="bottom"
          positionValue={200}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{color: 'white'}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.flatten({
  button: {
    marginTop: 20,
    width: 100,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.statusBarColor,
  },
  buttonText: {
    color: '#fff',
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  shadowView: {
    width: scale(280),
    height: verticalScale(450),
    alignItems: 'center',
    borderWidth: 0.5,
    backgroundColor: 'white',
    borderColor: '#EAEDED',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,

    elevation: 2,
  },

  text: {
    fontFamily: Fonts.ubuntu,
    marginTop: 10,
    color: colors.mainColor,
  },
  iconView: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});
