import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  TextInput,
  ScrollView,
  Alert,
  Platform,
  FlatList,
} from 'react-native';
import building from '../../services/building.json';
import Autocomplete from 'react-native-autocomplete-input';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Toast, {DURATION} from 'react-native-easy-toast';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {initialMode} from 'react-native-dark-mode';
import Picker from 'react-native-picker-js';
import ImagePicker from 'react-native-image-crop-picker';
import BackHeader from '../../components/backHeader';
import Modal, {ModalContent} from 'react-native-modals';
import moment from 'moment';
import {colors} from '../../assets/styles/colors-theme';
import history from '../../common/history';
import NaviBar from '../../components/navi-bar';
import LoadingView from '../../common/loading';
import Migrations from '../../services/realm/Mirgrations';
import {Avatar} from 'react-native-elements';
import {inject, observer} from 'mobx-react';
import RNPickerSelect from 'react-native-picker-select';
import {Fonts} from '../../assets/styles/fonts-theme';
import DeviceInfo from 'react-native-device-info';
var RNFS = require('react-native-fs');
import {observable} from 'mobx';
import CountryPicker, {
  getAllCountries,
} from 'react-native-country-picker-modal';
import RadioForm, {
  RadioButton,
  RadioButtonInput,
  RadioButtonLabel,
} from 'react-native-simple-radio-button';
import DateTimePicker from 'react-native-modal-datetime-picker';
import Menu, {
  MenuProvider,
  MenuTrigger,
  MenuOptions,
  MenuOption,
  renderers,
} from 'react-native-popup-menu';
import IconTextInput from '../../components/iconTextInput';
import CommonTextInput from '../../components/commonTextInput';
import {queryUser} from '../../services/realm/realmManger';
import {width, height} from '../../common/screen';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import Size from '../../common/size';
import UpLoadImage from './upLoadImage';
const {SlideInMenu} = renderers;
const size = new Size();
const NORTH_AMERICA = ['CA', 'US', 'HK', 'TW', 'CN'];
notificationDay = [
  {label: 'None', value: 0},
  {label: '1', value: 1},
  {label: '2', value: 2},
  {label: '3', value: 3},
  {label: '4', value: 4},
  {label: '5', value: 5},
  {label: '6', value: 6},
  {label: '7', value: 7},
];
@inject('appStore')
@observer
export default class ApartmentDetails extends Component {
  @observable
  DatePickervisable = false;
  @observable
  wheelSelectData = [];
  @observable
  dialogCountryVisable = false;
  @observable
  dialogNotificationVisable = false;
  @observable
  dialogPhotoVisable = false;

  @observable
  dialogInputVisable = false;

  @observable countryIndex = 0;

  @observable
  whichDatePicker = 0;

  @observable
  whichNotificationPicker = 0;

  @observable
  drakMode = false;

  @observable
  whichInput = 0;

  @observable
  floor = [];

  @observable
  lease = [];

  @observable
  create = false;

  @observable
  editable = true;
  @observable
  buildingName = [];

  inputAction(action) {
    switch (action) {
      case 0:
        this.whichInput = 0;
        this.dialogInputVisable = true;
        break;

      case 1:
        this.whichInput = 1;
        this.dialogInputVisable = true;
        break;

      case 2:
        this.DatePickervisable = true;
        this.whichDatePicker = 0;
        break;

      case 3:
        this.DatePickervisable = true;
        this.whichDatePicker = 1;
        break;

      case 4:
        this.whichInput = 4;
        this.dialogInputVisable = true;
        break;

      case 5:
        this.dialogCountryVisable = true;
        break;

      case 6:
        this.whichNotificationPicker = 0;
        this.dialogNotificationVisable = true;
        break;

      case 7:
        this.whichNotificationPicker = 1;
        this.dialogNotificationVisable = true;
        break;
    }
  }

  constructor(props) {
    super(props);
    this.store = props.appStore;

    // let userLocaleCountryCode = DeviceInfo.getDeviceCountry();
    // const userCountryData = getAllCountries()
    //   .filter(country => NORTH_AMERICA.includes(country.cca2))
    //   .filter(country => country.cca2 === userLocaleCountryCode)
    //   .pop();
    // let callingCode = null;
    // let cca2 = userLocaleCountryCode;
    // if (!cca2 || !userCountryData) {
    //   cca2 = "HK";
    //   callingCode = "1";
    // } else {
    //   callingCode = userCountryData.callingCode;
    // }
    this.state = {
      callingCode: '852',
    };
    this.store.apartmentData.country = this.store.text.CountryList[
      this.countryIndex
    ].label;
  }

  isDarkMode() {
    if (initialMode === 'dark') {
      this.drakMode = true;
    } else {
      this.drakMode = false;
    }
  }

  async componentWillMount() {
    var floorData = {
      value: 'G',
      text: 'G',
    };
    this.floor.push(floorData);
    for (var i = 1; i <= 108; i++) {
      var data = {
        value: i.toString(),
        text: i.toString(),
      };
      this.floor.push(data);
    }

    for (var i = 1; i <= 60; i++) {
      this.wheelSelectData.push(i);
    }

    this.isDarkMode();
    if (!this.props.navigation.state.params.create) {
      await this.store.cloneApartmentData(
        this.props.navigation.state.params.index,
      );
      await this.store.cloneApartmentDocData(
        this.props.navigation.state.params.index,
      );
    } else {
      console.log('reset apartment data');
      await this.store.resetApartmentData();
    }

    if (this.store.logined) {
      if (this.store.loginUserData.data.member.chara == 'tenant') {
        this.editable = false;
      }
    }
  }

  componentDidMount() {
    console.log(this.store.apartmentData.avatar);
    console.log(moment(this.store.apartmentData.createDate).toDate());
    building.map((items, index) => {
      this.buildingName.push(items.building);
    });
  }

  dateStringHandler(date) {
    if (date === null) {
      return '';
    } else {
      return moment(date).format('DD-MM-YYYY');
    }
  }

  removeRemark(index) {
    this.store.apartmentDataRemark.splice(index, 1);
  }

  whichDate() {
    if (this.whichDatePicker === 0) {
      return this.store.apartmentData.signContractDate;
    } else {
      return this.store.apartmentData.endContractDate;
    }
  }

  handleDatePicked = date => {
    this.DatePickervisable = false;
    console.log('A date has been picked: ', date);
    // this.hideDateTimePicker();
    var momentDate = moment(date);
    momentDate = momentDate.second(0);
    momentDate = momentDate.minute(0);
    momentDate = momentDate.hour(12);

    if (this.whichDatePicker === 0) {
      this.store.apartmentData.signContractDate = momentDate.toDate();
    } else {
      this.store.apartmentData.endContractDate = momentDate.toDate();
    }
    this.DatePickervisable = false;
  };

  leaseMonthHandler() {
    if (this.store.apartmentData.leaseMonth == null) {
      return this.store.text.pleaseSelect;
    } else {
      return this.store.apartmentData.leaseMonth + this.store.text.months;
    }
  }

  contractDatePicker(title, which, dateData) {
    return (
      <View
        style={{
          flexDirection: 'row',
          width: width,
          paddingTop: 10,
          alignItems: 'center',
        }}>
        <Text style={{marginLeft: 10, marginRight: 10}}>{title}</Text>
        <Text style={{marginRight: 10}}>
          {this.dateStringHandler(dateData)}
        </Text>
        <Icon
          size={30}
          name={'calendar-alt'}
          onPress={() => {
            this.DatePickervisable = true;
            this.whichDatePicker = which;
          }}
        />
      </View>
    );
  }

  async editAction() {
    if (this.store.apartmentData.id != 'demo') {
      await this.store.saveEdit(this.props.navigation.state.params.index);
      await this.store.resetApartmentData();
      await this.store.getUser();
      await history.goBack(this);
    } else {
      this.refs.toast.show('this is demo,can not edit');
    }
  }

  deleteAction() {
    Alert.alert(
      '',
      'Are you sure?',
      [
        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {
          text: 'Yes',
          onPress: () => {
            this.deleteApartment();
          },
        },
      ],
      {cancelable: false},
    );
  }

  async deleteApartment() {
    if (this.store.logined) {
      await this.store.deleteApartmentPost(
        this.props.navigation.state.params.index,
        this,
      );
    } else {
      await this.store.deleteNotification(
        this.props.navigation.state.params.index,
      );
      await this.store.deleteApartment(
        this.props.navigation.state.params.index,
      );
      await this.store.resetApartmentData();
      await this.store.getUser();
      history.goBack(this);
    }
  }
  whichNotificationIndex() {
    if (this.whichNotificationPicker === 0) {
      return this.store.apartmentData.rentNotification;
    } else {
      return this.store.apartmentData.endContractNotification;
    }
  }
  notificationSelectAction(index, which) {
    if (which === 0) {
      console.log(index);
      this.store.apartmentData.rentNotification = index;
    } else {
      this.store.apartmentData.endContractNotification = index;
    }
  }

  alertAction(msg) {
    Alert.alert(
      'Error',
      msg,
      [{text: 'OK', onPress: () => console.log('ok')}],
      {cancelable: false},
    );
  }

  renderSaveAndDeleteButtion() {
    if (this.store.logined) {
      if (this.store.loginUserData.data.member.chara == 'owner') {
        return (
          <View style={{width: width, alignItems: 'center'}}>
            <TouchableOpacity
              onPress={() => {
                this.nextAction(false);
              }}
              style={{
                marginTop: 50,
                marginBottom: 20,
                backgroundColor: colors.mainColor,
                width: width - 60,
                height: 60,
                borderRadius: 30,
                shadowColor: '#000',
                justifyContent: 'center',
                alignItems: 'center',
                shadowOffset: {
                  width: 0,
                  height: 2,
                },
                shadowOpacity: 0.23,
                shadowRadius: 2.62,

                elevation: 4,
              }}>
              <Text
                style={{
                  color: 'white',
                  fontFamily: Fonts.ubuntu,
                  fontSize: 18,
                }}>
                {this.store.text.save}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.deleteAction();
              }}
              style={{
                marginTop: 10,
                marginBottom: 20,
                width: width - 60,
                height: 60,
                borderRadius: 30,

                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text
                style={{
                  color: colors.line2Color,
                  fontFamily: Fonts.ubuntu,
                  fontSize: 18,
                }}>
                {this.store.text.delete}
              </Text>
            </TouchableOpacity>
          </View>
        );
      }
    } else {
      return (
        <View style={{width: width, alignItems: 'center'}}>
          <TouchableOpacity
            onPress={() => {
              this.nextAction(false);
            }}
            style={{
              marginTop: 50,
              marginBottom: 20,
              backgroundColor: colors.mainColor,
              width: width - 60,
              height: 60,
              borderRadius: 10,
              shadowColor: '#000',
              justifyContent: 'center',
              alignItems: 'center',
              shadowOffset: {
                width: 0,
                height: 2,
              },
              shadowOpacity: 0.23,
              shadowRadius: 2.62,

              elevation: 4,
            }}>
            <Text
              style={{color: 'white', fontFamily: Fonts.ubuntu, fontSize: 18}}>
              Save
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              this.deleteAction();
            }}
            style={{
              marginTop: 10,
              marginBottom: 20,
              backgroundColor: colors.mainColor,
              width: width - 60,
              height: 60,
              borderRadius: 10,
              shadowColor: '#000',
              justifyContent: 'center',
              alignItems: 'center',
              shadowOffset: {
                width: 0,
                height: 2,
              },
              shadowOpacity: 0.23,
              shadowRadius: 2.62,

              elevation: 4,
            }}>
            <Text
              style={{color: 'white', fontFamily: Fonts.ubuntu, fontSize: 18}}>
              Delete
            </Text>
          </TouchableOpacity>
        </View>
      );
    }
  }

  renderButton() {
    if (this.props.navigation.state.params.create) {
      return (
        <View style={{width: width, alignItems: 'center'}}>
          <TouchableOpacity
            onPress={() => {
              this.nextAction(true);
            }}
            style={{
              marginTop: 50,
              marginBottom: 20,
              backgroundColor: colors.mainColor,
              width: width - 60,
              height: 60,
              borderRadius: 30,
              shadowColor: '#000',
              justifyContent: 'center',
              alignItems: 'center',
              shadowOffset: {
                width: 0,
                height: 2,
              },
              shadowOpacity: 0.23,
              shadowRadius: 2.62,

              elevation: 4,
            }}>
            <Text
              style={{color: 'white', fontFamily: Fonts.ubuntu, fontSize: 18}}>
              {this.store.text.next}
            </Text>
          </TouchableOpacity>
        </View>
      );
    } else {
      return this.renderSaveAndDeleteButtion();
    }
  }

  apartmentNameReturn() {
    if (
      this.store.apartmentData.name == '' ||
      this.store.apartmentData.name == null
    ) {
      return this.store.text.apartment;
    } else {
      return this.store.apartmentData.name;
    }
  }

  nextAction(nextOrEdit) {
    let data = this.store.apartmentData;

    if (data.avatar !== null) {
      if (data.name !== null) {
        if (data.address !== null) {
          if (data.signContractDate !== null) {
            if (data.endContractDate !== null) {
              if (data.rent !== null) {
                if (data.rent !== '') {
                  if (data.deposit !== null) {
                    if (data.deposit !== '') {
                      if (nextOrEdit) {
                        history.push(this, '/uploadImage', {create: true});
                        // this.props.navigation.navigate('UpLoadImage',{create:true})
                      } else {
                        this.editAction();
                      }
                    } else {
                      var msg =
                        this.store.text.pleaseInput + this.store.text.deposit;
                      this.alertAction(msg);
                    }
                  } else {
                    var msg =
                      this.store.text.pleaseInput + this.store.text.deposit;
                    this.alertAction(msg);
                  }
                } else {
                  var msg = this.store.text.pleaseInput + this.store.text.rent;
                  this.alertAction(msg);
                }
              } else {
                var msg = this.store.text.pleaseInput + this.store.text.rent;
                this.alertAction(msg);
              }
            } else {
              var msg =
                this.store.text.pleaseInput +
                this.store.text.contractExpiryDate;
              this.alertAction(msg);
            }
          } else {
            var msg =
              this.store.text.pleaseInput + this.store.text.dateOfContract;
            this.alertAction(msg);
          }
        } else {
          var msg = this.store.text.pleaseInput + this.store.text.address;
          this.alertAction(msg);
        }
      } else {
        var msg = this.store.text.pleaseInput + this.store.text.apartment;
        this.alertAction(msg);
      }
    } else {
      var msg = 'Please add ' + 'the avatar';
      this.alertAction(msg);
    }
  }

  renderRemark() {
    if (this.store.apartmentDataRemark !== undefined) {
      if (this.store.apartmentDataRemark.length > 0) {
        return this.store.apartmentDataRemark.map((item, index) => {
          return (
            <View style={{width: width, alignItems: 'center'}}>
              <View style={[styles.inputTextView, {width: width - 40}]}>
                <Text style={styles.inputTextTitleView}>
                  {this.store.text.remark}
                </Text>

                <View style={{flexDirection: 'row', marginBottom: 5}}>
                  <View style={{flex: 0.8}}>
                    <TextInput
                      underlineColorAndroid="rgba(0,0,0,0)"
                      editable={this.editable}
                      style={{
                        fontSize: 20,
                        color: 'black',
                        fontFamily: Fonts.ubuntuTh,
                      }}
                      value={this.store.apartmentDataRemark[index]}
                      onChangeText={text =>
                        (this.store.apartmentDataRemark[index] = text)
                      }
                    />
                  </View>
                  <TouchableOpacity
                    disabled={!this.editable}
                    style={{flex: 0.2, alignItems: 'flex-end', marginRight: 10}}
                    onPress={() => {
                      this.removeRemark(index);
                    }}>
                    <Icon name="times-circle" color={'black'} size={20} solid />
                  </TouchableOpacity>
                </View>
              </View>
            </View>
            // <View
            //   style={{
            //     backgroundColor: colors.inputBgc,
            //     marginLeft: 20,
            //     marginRight: 20,
            //     marginTop: 40,
            //     height: verticalScale(40),
            //     borderRadius: 5,
            //   }}>
            //   <TextInput
            //     style={{
            //       // backgroundColor:theme.inputBgc,
            //       color: 'gary',
            //       height: verticalScale(35),
            //       marginBottom: moderateScale(30),
            //       paddingBottom: 0,
            //       fontSize: 15,
            //       paddingRight: 20,
            //       paddingLeft: 20,
            //       //fontFamily:Fonts.century
            //     }}
            //     value={this.store.apartmentDataRemark[index]}
            //     underlineColorAndroid="rgba(0,0,0,0)"
            //     onChangeText={text =>
            //       (this.store.apartmentDataRemark[index] = text)
            //     }
            //     placeholder={this.store.text.remark + '...'}
            //     placeholderStyle={{fontFamily: Fonts.ubuntuL}}
            //     placeholderTextColor={'gary'}
            //     blurOnSubmit={false}
            //   />
            //   <Icon
            //     name={'times-circle'}
            //     style={{position: 'absolute', top: -30, right: 0}}
            //     size={30}
            //     solid
            //     color={colors.mainColor}
            //     onPress={() => {
            //       this.removeRemark(index);
            //     }}
            //   />
            // </View>
          );
        });
      } else {
        return null;
      }
    } else {
      return null;
    }
  }

  whichInputTextReturn(which) {
    if (which) {
      if (this.whichInput === 0) {
        return this.store.text.apartment;
      } else if (this.whichInput === 1) {
        return this.store.text.address;
      } else {
        return this.store.text.rent;
      }
    } else {
      if (this.whichInput === 0) {
        return this.store.apartmentData.name;
      } else if (this.whichInput === 1) {
        return this.store.apartmentData.address;
      } else {
        return this.store.apartmentData.rent;
      }
    }
  }

  whichDataToBeChange(value) {
    if (this.whichInput === 0) {
      this.store.apartmentData.name = value;
    } else if (this.whichInput === 1) {
      return (this.store.apartmentData.address = value);
    } else {
      return (this.store.apartmentData.rent = value);
    }
  }

  floorStringReturn() {
    switch (this.store.apartmentData.floor) {
      case 'low':
        return this.store.text.low + this.store.text.floor;
        break;
      case 'middle':
        return this.store.text.middle + this.store.text.floor;
        break;
      case 'high':
        return this.store.text.high + this.store.text.floor;
        break;
    }
  }

  saveImageHandler(image, type) {
    var photoId = this.store.idGenerator();
    console.log(photoId);
    return {
      id: photoId,
      name: image.filename,
      type: type,
      createDate: new Date(),
      uri: image.path,
      mime: image.mime,
      height: image.height,
      width: image.width,
    };
  }

  saveAndroidImageHandler(image, type) {
    var photoId = this.store.idGenerator();
    return {
      id: photoId,
      name: photoId,
      type: type,
      createDate: new Date(),
      uri: image.path,
      mime: image.mime,
      height: image.height,
      width: image.width,
    };
  }

  async avatarHander(which) {
    if (which) {
      ImagePicker.openCamera({
        mediaType: 'photo',
        includeBase64: true,
        writeTempFile: false,
        cropping: false,
      }).then(image => {
        console.log(image);

        const response = image;
        // history.push(this,'/cropImage',{response})
        this.store.apartmentData.avatar = response.path;
      });
    } else {
      ImagePicker.openPicker({
        includeBase64: false,
        mediaType: 'photo',
        writeTempFile: false,
        cropping: false,
      }).then(async image => {
        console.log(image);
        console.log(RNFS.DocumentDirectoryPath);
        const response = image;
        if (Platform.OS === 'ios') {
          const uri = this.store.convertLocalIdentifierToAssetLibrary(
            response.localIdentifier,
            'JPG',
          );
          response.path = uri;
          await this.store.deleteAvatar();
          await this.store.apartmentDataDoc.push(
            this.saveImageHandler(response, 3),
          );
          console.log(this.store.apartmentDataDoc[0].uri);
          // this.store.apartmentData.avatar = this.store.avatarfilter()
          await this.store.avatarfilter();
        } else {
          await this.store.deleteAvatar();
          await this.store.apartmentDataDoc.push(
            this.saveAndroidImageHandler(response, 3),
          );
          await this.store.avatarfilter();
        }
      });
    }
    this.dialogPhotoVisable = false;
  }

  showDatetimePicker() {
    console.log('App started in', initialMode, 'mode');
    var color = 'white';
    if (initialMode === 'dark') {
      color = 'black';
    }
    if (this.DatePickervisable) {
      return (
        <View style={{backgroundColor: color}}>
          <DateTimePicker
            value={this.whichDate()}
            mode="date"
            is24Hour={true}
            display="default"
            onChange={this.handleDatePicked}
          />
        </View>
      );
    } else {
      return null;
    }
  }

  rentOutput(rent) {
    if (rent == null || rent == undefined) {
      return null;
    } else {
      return rent.toString();
    }
  }

  renderRemarkButton() {
    if (this.store.logined) {
      if (this.store.loginUserData.data.member.chara == 'owner') {
        return (
          <View style={{width: width, alignItems: 'center', marginTop: 20}}>
            {/* <Icon
              name={'plus-circle'}
              style={{padding: 10}}
              color={colors.mainColor}
              size={40}
              onPress={() => {
                this.store.apartmentDataRemark.push('');
              }}
            /> */}
            <Text
              style={{
                color: colors.mainColor,
                fontFamily: Fonts.ubuntu,
                fontSize: 20,
              }}>
              {'+ ' + this.store.text.add + this.store.text.log}
            </Text>
          </View>
        );
      }
    } else {
      return (
        <View style={{width: width, alignItems: 'center'}}>
          <Icon
            name={'plus-circle'}
            style={{padding: 10}}
            color={colors.mainColor}
            size={40}
            onPress={() => {
              this.store.apartmentDataRemark.push('');
            }}
          />
        </View>
      );
    }
  }

  notificationStringReturn(day) {
    if (day === 0) {
      return this.store.text.nonotice;
    } else {
      return this.store.text.notice + day + this.store.text.before;
    }
  }
  endNotificationStringReturn(month) {
    if (month === 0) {
      return this.store.text.nonotice;
    } else {
      return this.store.text.notice + month + this.store.text.endBefore;
    }
  }

  selectCountryAction(value) {
    this.store.apartmentData.country = value.value;
    this.store.apartmentData.callingCode = value.callingCode;
  }

  render() {
    return (
      <MenuProvider style={{flex: 1, backgroundColor: 'white'}}>
        <LoadingView visible={this.store.loading} />
        <BackHeader instance={this} back={true} />
        <KeyboardAwareScrollView style={{flex: 1}}>
          <View style={{marginLeft: 20, flexDirection: 'row', marginTop: 20}}>
            {/* {this.store.apartmentData.avatar ==
            '../../assets/images/demohouse.jpg' ? (
              <Avatar
                //onEditPress={() => { this.dialogPhotoVisable = true }}
                onEditPress={() => {
                  this.avatarHander(false);
                }}
                rounded
                source={require('../../assets/images/demohouse.jpg')}
                containerStyle={{
                  shadowColor: '#000',
                  shadowOffset: {width: 0, height: 2},
                  shadowOpacity: 0.8,
                  shadowRadius: 2,
                }}
                rounded
                size={90}
                showEditButton={true}
              />
            ) : (
              <Avatar
                //onEditPress={() => { this.dialogPhotoVisable = true }}
                onEditPress={() => {
                  this.avatarHander(false);
                }}
                rounded
                source={{
                  uri: this.store.apartmentData.avatar,
                }}
                containerStyle={{
                  shadowColor: '#000',
                  shadowOffset: {width: 0, height: 2},
                  shadowOpacity: 0.8,
                  shadowRadius: 2,
                }}
                rounded
                size={90}
                showEditButton={true}
              />
            )} */}

            <View style={{marginLeft: 20}}>
              <Text style={[styles.textView, {marginTop: 10}]}>
                {this.store.apartmentData.name}
              </Text>
            </View>
          </View>
          <View style={{flex: 1, alignSelf: 'center', width: width - 40}}>
            <TouchableOpacity
              disabled={!this.editable}
              style={styles.textViewStyle}
              onPress={() => {
                history.push(this, '/apartmentNameAddressEdit');
              }}>
              <Text style={styles.inputTextTitleView}>
                {this.store.text.apartment}
              </Text>

              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <View style={{flex: 0.8}}>
                  <Text
                    style={{
                      fontSize: 20,
                      color: 'black',
                      fontFamily: Fonts.ubuntuTh,
                    }}>
                    {this.store.apartmentData.name}
                  </Text>
                </View>
                <TouchableOpacity
                  disabled={!this.editable}
                  style={{flex: 0.2, alignItems: 'flex-end', marginRight: 10}}
                  onPress={() => {
                    this.store.apartmentData.name = '';
                  }}>
                  <Icon name="times-circle" color={'black'} size={20} solid />
                </TouchableOpacity>
              </View>
            </TouchableOpacity>
            <View style={styles.inputTextView}>
              <Text style={styles.inputTextTitleView}>
                {this.store.text.address}
              </Text>

              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <View style={{flex: 0.8}}>
                  <TextInput
                    underlineColorAndroid="rgba(0,0,0,0)"
                    editable={this.editable}
                    style={{
                      fontSize: 20,
                      color: 'black',
                      fontFamily: Fonts.ubuntuTh,
                      marginBottom: Platform.OS == 'ios' ? 0 : 15,
                    }}
                    value={this.store.apartmentData.address}
                    onChangeText={text => {
                      this.store.apartmentData.address = text;
                    }}
                  />
                </View>
                <TouchableOpacity
                  disabled={!this.editable}
                  style={{flex: 0.2, alignItems: 'flex-end', marginRight: 10}}
                  onPress={() => {
                    this.store.apartmentData.address = '';
                  }}>
                  <Icon name="times-circle" color={'black'} size={20} solid />
                </TouchableOpacity>
              </View>
            </View>
            <View style={styles.inputTextView}>
              <Text style={styles.inputTextTitleView}>
                {this.store.text.seats}
              </Text>

              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <View style={{flex: 0.8}}>
                  <TextInput
                    underlineColorAndroid="rgba(0,0,0,0)"
                    editable={this.editable}
                    style={{
                      fontSize: 20,
                      color: 'black',
                      fontFamily: Fonts.ubuntuTh,
                    }}
                    value={this.store.apartmentData.seats}
                    onChangeText={text => {
                      this.store.apartmentData.seats = text;
                    }}
                  />
                </View>
                <TouchableOpacity
                  disabled={!this.editable}
                  style={{flex: 0.2, alignItems: 'flex-end', marginRight: 10}}
                  onPress={() => {
                    this.store.apartmentData.seats = '';
                  }}>
                  <Icon name="times-circle" color={'black'} size={20} solid />
                </TouchableOpacity>
              </View>
            </View>
            <View style={styles.inputTextView}>
              <Text style={styles.inputTextTitleView}>
                {this.store.text.unit}
              </Text>

              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <View style={{flex: 0.8}}>
                  <TextInput
                    underlineColorAndroid="rgba(0,0,0,0)"
                    editable={this.editable}
                    style={{
                      fontSize: 20,
                      color: 'black',
                      fontFamily: Fonts.ubuntuTh,
                    }}
                    value={this.store.apartmentData.unit}
                    onChangeText={text => {
                      this.store.apartmentData.unit = text;
                    }}
                  />
                </View>
                <TouchableOpacity
                  disabled={!this.editable}
                  style={{flex: 0.2, alignItems: 'flex-end', marginRight: 10}}
                  onPress={() => {
                    this.store.apartmentData.unit = '';
                  }}>
                  <Icon name="times-circle" color={'black'} size={20} solid />
                </TouchableOpacity>
              </View>
            </View>

            <View
              style={{
                marginTop: 20,
                borderBottomWidth: 1,
                borderBottomColor: colors.line2Color,
              }}>
              <Text
                style={{
                  fontFamily: Fonts.ubuntuL,
                  fontSize: 17,
                  color: colors.line2Color,
                }}>
                {this.store.text.floor}
              </Text>

              <Menu
                name="floor"
                renderer={SlideInMenu}
                onSelect={value => {
                  this.store.apartmentData.floor = value;
                }}>
                <MenuTrigger style={{flexDirection: 'row', marginBottom: 5}}>
                  <View style={{flex: 0.8}}>
                    <Text
                      style={{
                        fontSize: 20,
                        color: 'black',
                        fontFamily: Fonts.ubuntuTh,
                      }}>
                      {this.store.apartmentData.floor + this.store.text.floor}
                    </Text>
                  </View>
                  <View
                    style={{
                      flex: 0.2,
                      alignItems: 'flex-end',
                      marginRight: 10,
                    }}>
                    <Icon name="chevron-down" color={'black'} size={20} />
                  </View>
                </MenuTrigger>
                <MenuOptions
                  customStyles={{
                    optionText: {
                      margin: 5,
                      fontFamily: Fonts.ubuntu,
                      color: 'white',
                      fontSize: 20,
                    },
                    optionWrapper: {
                      backgroundColor: colors.mainColor,
                      alignItems: 'center',
                    },
                  }}>
                  {/* <ScrollView style={{maxHeight: 300}}>
                    {this.floor.map((obj, i) => {
                      return <MenuOption value={obj.value} text={obj.text} />;
                    })}
                  </ScrollView> */}
                  <FlatList
                    data={this.floor}
                    renderItem={({item}) => (
                      <MenuOption value={item.value} text={item.text} />
                    )}
                    style={{height: 300}}
                  />
                </MenuOptions>
              </Menu>
            </View>

            <TouchableOpacity
              disabled={!this.editable}
              style={styles.textViewStyle}
              onPress={() => {
                this.inputAction(2);
              }}>
              <Text style={styles.inputTextTitleView}>
                {this.store.text.dateOfContract}
              </Text>

              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <View style={{flex: 1}}>
                  <Text
                    style={{
                      fontSize: 20,
                      color: 'black',
                      fontFamily: Fonts.ubuntuTh,
                    }}>
                    {this.dateStringHandler(
                      this.store.apartmentData.signContractDate,
                    )}
                  </Text>
                </View>
              </View>
            </TouchableOpacity>

            <TouchableOpacity
              disabled={!this.editable}
              style={styles.textViewStyle}
              onPress={() => {
                this.inputAction(3);
              }}>
              <Text style={styles.inputTextTitleView}>
                {this.store.text.contractExpiryDate}
              </Text>

              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <View style={{flex: 1}}>
                  <Text
                    style={{
                      fontSize: 20,
                      color: 'black',
                      fontFamily: Fonts.ubuntuTh,
                    }}>
                    {this.dateStringHandler(
                      this.store.apartmentData.endContractDate,
                    )}
                  </Text>
                </View>
              </View>
            </TouchableOpacity>
            <View
              style={{
                marginTop: 20,
                borderBottomWidth: 1,
                borderBottomColor: colors.line2Color,
              }}>
              <Text
                style={{
                  fontFamily: Fonts.ubuntuL,
                  fontSize: 17,
                  color: colors.line2Color,
                }}>
                {this.store.text.lease}
              </Text>

              <Menu
                name="lease"
                renderer={SlideInMenu}
                onSelect={value => {
                  this.store.apartmentData.leaseMonth = value;
                }}>
                <MenuTrigger style={{flexDirection: 'row', marginBottom: 5}}>
                  <View style={{flex: 0.8}}>
                    <Text
                      style={{
                        fontSize: 20,
                        color: 'black',
                        fontFamily: Fonts.ubuntuTh,
                      }}>
                      {this.leaseMonthHandler()}
                    </Text>
                  </View>
                  <View
                    style={{
                      flex: 0.2,
                      alignItems: 'flex-end',
                      marginRight: 10,
                    }}>
                    <Icon name="chevron-down" color={'black'} size={20} />
                  </View>
                </MenuTrigger>
                <MenuOptions
                  customStyles={{
                    optionText: {
                      margin: 5,
                      fontFamily: Fonts.ubuntu,
                      color: 'white',
                      fontSize: 20,
                    },
                    optionWrapper: {
                      backgroundColor: colors.mainColor,
                      alignItems: 'center',
                    },
                  }}>
                  {/* <ScrollView style={{maxHeight: 300}}>
                    {this.wheelSelectData.map((obj, i) => {
                      return <MenuOption value={obj} text={obj} />;
                    })}
                  </ScrollView> */}
                  <FlatList
                    data={this.wheelSelectData}
                    renderItem={({item}) => (
                      <MenuOption value={item} text={item} />
                    )}
                    style={{height: 300}}
                  />
                </MenuOptions>
              </Menu>
            </View>


            <View style={styles.inputTextView}>
              <Text style={styles.inputTextTitleView}>
                {this.store.text.rent}
              </Text>

              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <View style={{flex: 0.8}}>
                  <TextInput
                    keyboardType={'numeric'}
                    underlineColorAndroid="rgba(0,0,0,0)"
                    editable={this.editable}
                    style={{
                      fontSize: 20,
                      color: 'black',
                      fontFamily: Fonts.ubuntuTh,
                    }}
                    value={this.rentOutput(this.store.apartmentData.rent)}
                    onChangeText={text => {
                      this.store.apartmentData.rent = text;
                    }}
                  />
                </View>
                <TouchableOpacity
                  disabled={!this.editable}
                  style={{flex: 0.2, alignItems: 'flex-end', marginRight: 10}}
                  onPress={() => {
                    this.store.apartmentData.rent = '';
                  }}>
                  <Icon name="times-circle" color={'black'} size={20} solid />
                </TouchableOpacity>
              </View>
            </View>
            <View style={styles.inputTextView}>
              <Text style={styles.inputTextTitleView}>
                {this.store.text.deposit}
              </Text>

              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <View style={{flex: 0.8}}>
                  <TextInput
                    keyboardType={'numeric'}
                    underlineColorAndroid="rgba(0,0,0,0)"
                    editable={this.editable}
                    style={{
                      fontSize: 20,
                      color: 'black',
                      fontFamily: Fonts.ubuntuTh,
                    }}
                    value={this.rentOutput(this.store.apartmentData.deposit)}
                    onChangeText={text => {
                      this.store.apartmentData.deposit = text;
                    }}
                  />
                </View>
                <TouchableOpacity
                  disabled={!this.editable}
                  style={{flex: 0.2, alignItems: 'flex-end', marginRight: 10}}
                  onPress={() => {
                    this.store.apartmentData.deposit = '';
                  }}>
                  <Icon name="times-circle" color={'black'} size={20} solid />
                </TouchableOpacity>
              </View>
            </View>

            <View
              style={{
                marginTop: 20,
                borderBottomWidth: 1,
                borderBottomColor: colors.line2Color,
              }}>
              <Text
                style={{
                  fontFamily: Fonts.ubuntuL,
                  fontSize: 17,
                  color: colors.line2Color,
                }}>
                {this.store.text.country}
              </Text>

              <Menu
                name="country"
                renderer={SlideInMenu}
                onSelect={value => this.selectCountryAction(value)}>
                <MenuTrigger
                  disabled={!this.editable}
                  style={{flexDirection: 'row', marginBottom: 5}}>
                  <View style={{flex: 0.8}}>
                    <Text
                      style={{
                        fontSize: 20,
                        color: 'black',
                        fontFamily: Fonts.ubuntuTh,
                      }}>
                      {this.store.getCountryLabel(
                        this.store.apartmentData.country,
                      )}
                    </Text>
                  </View>
                  <View
                    style={{
                      flex: 0.2,
                      alignItems: 'flex-end',
                      marginRight: 10,
                    }}>
                    <Icon name="chevron-down" color={'black'} size={20} />
                  </View>
                </MenuTrigger>
                <MenuOptions
                  customStyles={{
                    optionText: {
                      margin: 5,
                      fontFamily: Fonts.ubuntu,
                      color: 'white',
                      fontSize: 20,
                    },
                    optionWrapper: {
                      backgroundColor: colors.mainColor,
                      alignItems: 'center',
                    },
                  }}>
                  {this.store.text.CountryList.map((obj, i) => {
                    return <MenuOption value={obj} text={obj.label} />;
                  })}
                </MenuOptions>
              </Menu>
            </View>
            <View
              style={{
                marginTop: 20,
                borderBottomWidth: 1,
                borderBottomColor: colors.line2Color,
              }}>
              <Text
                style={{
                  fontFamily: Fonts.ubuntuL,
                  fontSize: 17,
                  color: colors.line2Color,
                }}>
                {this.store.text.notificationOfCollectRents}
              </Text>

              <Menu
                name="rentnotification"
                renderer={SlideInMenu}
                onSelect={value => {
                  this.whichNotificationPicker = 0;
                  this.notificationSelectAction(value, 0);
                }}>
                <MenuTrigger style={{flexDirection: 'row', marginBottom: 5}}>
                  <View style={{flex: 0.8}}>
                    <Text
                      style={{
                        fontSize: 20,
                        color: 'black',
                        fontFamily: Fonts.ubuntuTh,
                      }}>
                      {this.notificationStringReturn(
                        this.store.apartmentData.rentNotification,
                      )}
                    </Text>
                  </View>
                  <View
                    style={{
                      flex: 0.2,
                      alignItems: 'flex-end',
                      marginRight: 10,
                    }}>
                    <Icon name="chevron-down" color={'black'} size={20} />
                  </View>
                </MenuTrigger>
                <MenuOptions
                  customStyles={{
                    optionText: {
                      margin: 5,
                      fontFamily: Fonts.ubuntu,
                      color: 'white',
                      fontSize: 20,
                    },
                    optionWrapper: {
                      backgroundColor: colors.mainColor,
                      alignItems: 'center',
                    },
                  }}>
                  {notificationDay.map((obj, i) => {
                    return <MenuOption value={obj.value} text={obj.label} />;
                  })}
                </MenuOptions>
              </Menu>
            </View>

            <View
              style={{
                marginTop: 20,
                borderBottomWidth: 1,
                borderBottomColor: colors.line2Color,
              }}>
              <Text
                style={{
                  fontFamily: Fonts.ubuntuL,
                  fontSize: 17,
                  color: colors.line2Color,
                }}>
                {this.store.text.notificationOfcontractExpiry}
              </Text>

              <Menu
                name="contract"
                renderer={SlideInMenu}
                onSelect={value => {
                  this.whichNotificationPicker = 1;
                  this.notificationSelectAction(value, 1);
                }}>
                <MenuTrigger style={{flexDirection: 'row', marginBottom: 5}}>
                  <View style={{flex: 0.8}}>
                    <Text
                      style={{
                        fontSize: 20,
                        color: 'black',
                        fontFamily: Fonts.ubuntuTh,
                      }}>
                      {this.endNotificationStringReturn(
                        this.store.apartmentData.endContractNotification,
                      )}
                    </Text>
                  </View>
                  <View
                    style={{
                      flex: 0.2,
                      alignItems: 'flex-end',
                      marginRight: 10,
                    }}>
                    <Icon name="chevron-down" color={'black'} size={20} />
                  </View>
                </MenuTrigger>
                <MenuOptions
                  customStyles={{
                    optionText: {
                      margin: 5,
                      fontFamily: Fonts.ubuntu,
                      color: 'white',
                      fontSize: 20,
                    },
                    optionWrapper: {
                      backgroundColor: colors.mainColor,
                      alignItems: 'center',
                    },
                  }}>
                  {notificationDay.map((obj, i) => {
                    return <MenuOption value={obj.value} text={obj.label} />;
                  })}
                </MenuOptions>
              </Menu>
            </View>
          </View>

          {this.renderRemark()}
          {this.renderRemarkButton()}

          {this.renderButton()}

          <DateTimePicker
            mode={'date'}
            isVisible={this.DatePickervisable}
            onConfirm={this.handleDatePicked}
            isDarkModeEnabled={this.drakMode}
            onCancel={() => {
              this.DatePickervisable = false;
            }}
          />
        </KeyboardAwareScrollView>

        <Modal
          visible={this.dialogCountryVisable}
          width={0.5}
          height={0.3}
          onTouchOutside={() => {
            this.dialogCountryVisable = false;
          }}
          swipeDirection={['up', 'down']} // can be string or an array
          swipeThreshold={200} // default 100
          onSwipeOut={event => {
            this.dialogCountryVisable = false;
          }}>
          <ModalContent>
            <View>
              <RadioForm formHorizontal={false} animation={true}>
                {this.store.text.CountryList.map((obj, i) => {
                  return (
                    <RadioButton labelHorizontal={true} key={i}>
                      <RadioButtonInput
                        obj={obj}
                        index={this.countryIndex}
                        isSelected={this.countryIndex === i}
                        onPress={() => {
                          this.countryIndex = i;
                          this.store.apartmentData.country = obj.value;
                          this.store.apartmentData.callingCode =
                            obj.callingCode;
                        }}
                        borderWidth={1}
                        buttonInnerColor={colors.mainColor}
                        buttonOuterColor={
                          this.countryIndex === i
                            ? colors.mainColor
                            : colors.textColor
                        }
                        buttonSize={15}
                        buttonOuterSize={30}
                        buttonStyle={{}}
                        buttonWrapStyle={{marginLeft: 10}}
                      />
                      <RadioButtonLabel
                        obj={obj}
                        index={this.countryIndex}
                        labelHorizontal={true}
                        onPress={() => {
                          this.countryIndex = i;
                          this.store.apartmentData.country = obj.value;
                          this.store.apartmentData.callingCode =
                            obj.callingCode;
                        }}
                        labelStyle={{
                          fontSize: 14,
                          color: colors.textColor,
                          fontFamily: Fonts.ubuntu,
                        }}
                        labelWrapStyle={{}}
                      />
                    </RadioButton>
                  );
                })}
              </RadioForm>
            </View>
          </ModalContent>
        </Modal>
        <Modal
          visible={this.dialogNotificationVisable}
          width={0.5}
          height={0.5}
          onTouchOutside={() => {
            this.dialogNotificationVisable = false;
          }}
          swipeDirection={['up', 'down']} // can be string or an array
          swipeThreshold={200} // default 100
          onSwipeOut={event => {
            this.dialogNotificationVisable = false;
          }}>
          <ModalContent>
            <View>
              <RadioForm formHorizontal={false} animation={true}>
                {notificationDay.map((obj, i) => {
                  return (
                    <RadioButton labelHorizontal={true} key={i}>
                      <RadioButtonInput
                        obj={obj}
                        index={this.whichNotificationIndex()}
                        isSelected={this.whichNotificationIndex() === i}
                        onPress={() => {
                          this.notificationSelectAction(i);
                        }}
                        borderWidth={1}
                        buttonInnerColor={colors.mainColor}
                        buttonOuterColor={
                          this.whichNotificationIndex() === i
                            ? colors.mainColor
                            : colors.textColor
                        }
                        buttonSize={15}
                        buttonOuterSize={30}
                        buttonStyle={{}}
                        buttonWrapStyle={{marginLeft: 10}}
                      />
                      <RadioButtonLabel
                        obj={obj}
                        index={this.whichNotificationIndex()}
                        labelHorizontal={true}
                        onPress={() => {
                          this.notificationSelectAction(i);
                        }}
                        labelStyle={{
                          fontSize: 14,
                          color: colors.textColor,
                          fontFamily: Fonts.ubuntu,
                        }}
                        labelWrapStyle={{}}
                      />
                    </RadioButton>
                  );
                })}
              </RadioForm>
            </View>
          </ModalContent>
        </Modal>
        <Modal
          visible={this.dialogInputVisable}
          width={0.9}
          height={0.2}
          onTouchOutside={() => {
            this.dialogInputVisable = false;
          }}
          swipeDirection={['up', 'down']} // can be string or an array
          swipeThreshold={200} // default 100
          onSwipeOut={event => {
            this.dialogInputVisable = false;
          }}>
          <ModalContent>
            <View>
              <CommonTextInput
                placeholder={this.whichInputTextReturn(true)}
                value={this.whichInputTextReturn(false)}
                onChangeText={value => this.whichDataToBeChange(value)}
              />
            </View>
          </ModalContent>
        </Modal>

        <Modal
          visible={this.dialogPhotoVisable}
          width={0.7}
          height={0.2}
          onTouchOutside={() => {
            this.dialogPhotoVisable = false;
          }}
          swipeDirection={['up', 'down']} // can be string or an array
          swipeThreshold={200} // default 100
          onSwipeOut={event => {
            this.dialogPhotoVisable = false;
          }}>
          <ModalContent>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <TouchableOpacity
                style={{alignItems: 'center'}}
                onPress={() => this.avatarHander(true)}>
                <Icon name="camera" sholid color={colors.mainColor} size={40} />
                <Text
                  style={{fontFamily: Fonts.ubuntu, color: colors.mainColor}}>
                  {this.store.text.camera}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{alignItems: 'center', marginLeft: 30}}
                onPress={() => this.avatarHander(false)}>
                <Icon name="images" sholid color={colors.mainColor} size={40} />
                <Text
                  style={{fontFamily: Fonts.ubuntu, color: colors.mainColor}}>
                  {this.store.text.gallery}
                </Text>
              </TouchableOpacity>
            </View>
          </ModalContent>
        </Modal>

        <Toast
          ref="toast"
          style={{backgroundColor: colors.mainColor}}
          position="bottom"
          positionValue={200}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{color: 'white'}}
        />
        <Picker
          ref={picker => (this.picker = picker)}
          style={{height: 300, backgroundColor: 'white'}}
          pickerTitleStyle={{color: 'white'}}
          pickerBtnStyle={{color: colors.mainColor, fontFamily: Fonts.ubuntu}}
          pickerToolBarStyle={{backgroundColor: 'white'}}
          showMask={true}
          showDuration={300}
          pickerData={this.wheelSelectData}
          selectedValue={1}
          onPickerDone={pickedValue => {
            this.store.apartmentData.leaseMonth = pickedValue;
          }}
        />
      </MenuProvider>
    );
  }
}

const styles = StyleSheet.flatten({
  inputTextView: {
    marginTop: 20,
    borderBottomWidth: 1,
    borderBottomColor: colors.line2Color,
    height: Platform.OS == 'ios' ? 55 : 65,
  },

  textViewStyle: {
    marginTop: 20,
    borderBottomWidth: 1,
    borderBottomColor: colors.line2Color,
    height: 55,
  },

  inputTextTitleView: {
    fontFamily: Fonts.ubuntuL,
    fontSize: 20,
    color: colors.line2Color,
  },

  button: {
    marginTop: 20,
    width: width,
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.statusBarColor,
  },
  buttonText: {
    color: '#fff',
  },
  picker: {
    fontSize: 20,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  textView: {
    color: colors.mainColor,
    fontFamily: Fonts.ubuntu,
    fontSize: size.getSize(20),
    fontWeight: 'bold',
  },
});
const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'black',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
});
