import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Image,
  ScrollView,
  Alert,
  Linking,
} from 'react-native';
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 {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import Toast, {DURATION} from 'react-native-easy-toast';
import Migrations from '../../services/realm/Mirgrations';
import BackHeader from '../../components/backHeader';
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';
@inject('appStore')
@observer
export default class SelectApartmentByOneClickRental extends Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
    Global.instance = this;
  }

  static navigationOptions = {
    gesturesEnabled: false,
  };

  selectAction() {}

  oneKeyToRent(apartmentName, apartmentId) {
    var msgContent =
      '你好，我想放盤，我的單位名是' +
      apartmentName +
      '(ID: ' +
      apartmentId +
      ')';
      console.log(msgContent)
    Alert.alert(
      '一鍵放盤',
      '一鍵放盤需由Rent Chat客服處理，請選擇與客服聯絡方法',
      [
        {
          text: '取消',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {
          text: '致電 Rent Chat',
          onPress: () => {
            Linking.openURL(`tel:${'31040558'}`);
          },
        },
        {
          text: '在線對話',
          onPress: () =>
            this.store.gotohelperChat(this, msgContent),
        },
      ],
      {cancelable: false},
    );
  }

  list(title, contents, color) {
    return (
      <View style={{flexDirection: 'row'}}>
        <View style={{}}>
          <Text style={{fontFamily: Fonts.ubuntu, color: colors.textColor}}>
            {title + ':    '}
          </Text>
        </View>
        <View style={{}}>
          <Text style={{fontFamily: Fonts.ubuntu, color: color}}>
            {contents}
          </Text>
        </View>
      </View>
    );
  }

  pushClickAction(items) {
    this.oneKeyToRent(items.name, items.id);
  }

  apartmentRender() {
    return this.store.apartmentsData.map((items, index) => {
      console.log(items);
      return (
        <TouchableOpacity
          style={{width: width, justifyContent: 'center'}}
          onPress={() => {
            this.pushClickAction(items);
          }}>
          <View style={{margin: 10}}>
            {this.list(this.store.text.apartment, items.name, colors.textColor)}
            {this.list(
              this.store.text.address,
              items.address,
              colors.textColor,
            )}
            {this.list(
              this.store.text.rent,
              'HKD ' + items.rent,
              colors.textColor,
            )}
            <View
              style={{
                height: 1,
                width: width - 20,
                backgroundColor: colors.mainColor,
                marginTop: 10,
              }}
            />
          </View>
        </TouchableOpacity>
      );
    });
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <BackHeader instance={this} back={true} title={'選擇樓盤'} />
        <ScrollView>{this.apartmentRender()}</ScrollView>
        <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',
  },
});
