import React, { Component } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  Image,
  Share,
  Alert,
  Linking
} from "react-native";
import FastImage from "react-native-fast-image";
import Icon from "react-native-vector-icons/FontAwesome5";
import StepIndicator from "react-native-step-indicator";
import Modal, { ModalContent } from "react-native-modals";
import Switch from "react-native-switch-pro";
import { colors } from "../../assets/styles/colors-theme";
import { Fonts } from "../../assets/styles/fonts-theme";
import Realm from "realm";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import LoadingView from "../../common/loading";
import history from "../../common/history";
import NaviBar from "../../components/navi-bar";
import Migrations from "../../services/realm/Mirgrations";
import BackHeader from "../../components/backHeader";
import { inject, observer } from "mobx-react";
import { observable } from "mobx";
import { queryUser } from "../../services/realm/realmManger";
import AsyncStorageHelper from "../../common/asyncStorageHelper";
import ImagePicker from "react-native-image-crop-picker";
import {
  UserSchemea,
  ApartmentSchemea,
  DocSchemea,
  NotificationSchemea
} from "../../services/realm/schemeas";
import { width, height } from "../../common/screen";
const asyncStorageHelper = new AsyncStorageHelper();

let realm = new Realm({ schema: [UserSchemea, ApartmentSchemea, DocSchemea,NotificationSchemea] });

@inject("appStore")
@observer
export default class PropertyDetails extends Component {
  @observable
  data = null;

  constructor(props) {
    super(props);
    this.store = props.appStore;
    this.data = this.props.navigation.state.params.rentData;
  }

  componentDidMount() {}

  renderProject() {
    var project = [
      this.data.prj1,
      this.data.prj2,
      this.data.prj3,
      this.data.prj4,
      this.data.prj5,
      this.data.prj6
    ];
    return project.map((items, index) => {
      if (items != "") {
        return <Text style={styles.text}>{items}</Text>;
      }
    });
  }

  renderMobile() {
    if (this.data.mobile != "") {
      return (
        <Text style={styles.text}>
          {"手機: "}
          <Text
            style={[styles.text, { color: colors.mainColor }]}
            onPress={() => {
              Linking.openURL(`tel:${this.data.mobile}`);
            }}
          >
            {this.data.mobile}
          </Text>
        </Text>
      );
    } else {
      return <Text style={styles.text}>{"手機: N/A"}</Text>;
    }
  }

  renderTel() {
    if (this.data.tel != "") {
      return (
        <Text style={styles.text}>
          {"電話: "}
          <Text
            style={[styles.text, { color: colors.mainColor }]}
            onPress={() => {
              Linking.openURL(`tel:${this.data.tel}`);
            }}
          >
            {this.data.tel}
          </Text>
        </Text>
      );
    } else {
      return <Text style={styles.text}>{"電話: N/A"}</Text>;
    }
  }

  renderWebSite() {
    if (this.data.website != "") {
      return (
        <Text style={styles.text}>
          {"網站: "}
          <Text
            style={[styles.text, { color: colors.mainColor }]}
            onPress={() => {
              Linking.openURL(this.data.website).catch(err =>
                console.error("Couldn't load page", err)
              );
            }}
          >
            {this.data.website}
          </Text>
        </Text>
      );
    } else {
      return <Text style={styles.text}>{"網站: N/A"}</Text>;
    }
  }

  render() {
    console.log(this.store.image);
    var data = this.store.apartmentData;
    return (
      <View
        style={{
          flex: 1
        }}
      >
        <BackHeader instance={this} back={true} />
        <LoadingView visible={this.store.loading} />
        <Text style={[styles.text, { marginTop: 20 }]}>
          {"屋苑: " + this.data.estate}
        </Text>
        <Text style={[styles.text, { marginTop: 20 }]}>
          {"地區: " + this.data.loc1+this.data.loc2}
        </Text>
        <Text style={styles.text}>{"期: " + this.data.phase}</Text>
        <Text style={styles.text}>{"大廈: " + this.data.bldg}</Text>
        <Text style={styles.text}>{"座: " + this.data.block}</Text>
        <Text style={styles.text}>{"樓層: " + this.data.fl}</Text>
        <Text style={styles.text}>{"室: " + this.data.room}</Text>
        <Text style={styles.text}>{"租屋成交價： "+"HKD "+this.data.tprice}</Text>
        <Text style={styles.text}>{"成交日期: " + this.data.date}</Text>
        <Text style={styles.text}> {"建築面積： "+this.data.carea+""}</Text>
        <Text style={styles.text}>{"實用面積： "+this.data.aarea+""}</Text>
        <Text style={styles.text}>{"建築面積尺價：: " +"HKD "+this.data.cprice}</Text>
        <Text style={styles.text}>{"實用面積尺價：: " +"HKD "+ this.data.aprice}</Text>
        
        {/* <Text style={styles.text}>
                {'手機: '}
                <Text style={[styles.text, { color: colors.mainColor }]} onPress={() => { Linking.openURL(`tel:${this.data.mobile}`); }}>
                    {this.data.mobile}
                </Text>
            </Text>

            <Text style={styles.text}>
                {'電話: '}
                <Text style={[styles.text, { color: colors.mainColor }]} onPress={() => { Linking.openURL(`tel:${this.data.tel}`); }}>
                    {this.data.tel}
                </Text>
            </Text> */}
      </View>
    );
  }
}

const styles = StyleSheet.flatten({
  titleView: {
    marginRight: 5,
    marginLeft: 5,
    marginTop: 10,
    width: scale(265)
  },

  titieStyle: {
    fontSize: 20,
    color: colors.mainColor,
    fontFamily: Fonts.ubuntu
  },
  button: {
    marginTop: 20,
    width: 100,
    height: 40,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.statusBarColor
  },
  buttonText: {
    color: "#fff"
  },
  textView: {
    color: colors.textColor,
    fontFamily: Fonts.ubuntu,
    fontSize: 17
  },
  slide1: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },

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

    elevation: 2
  },

  subTitle: {
    marginTop: 5,
    marginLeft: 10,
    marginRight: 10,
    color: colors.mainColor,
    fontSize: 15,
    fontFamily: Fonts.ubuntu
  },

  text: {
    marginTop: 5,
    marginLeft: 10,
    marginRight: 10,
    color: colors.textColor,
    fontSize: 14,
    fontFamily: Fonts.ubuntu
  },
  stepIndicator: {
    marginVertical: 50
  }
});
