import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Image,
  FlatList,
} from 'react-native';
import FastImage from 'react-native-fast-image';
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 LoadingView from '../../common/loading';
import NaviBar from '../../components/navi-bar';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import Migrations from '../../services/realm/Mirgrations';
import {inject, observer} from 'mobx-react';
import {width, height} from '../../common/screen';

export default class IndustrialBuildingList extends Component {
  constructor(props) {
    super(props);
  }

  renderMobile() {
    if (this.props.items.mobile != '') {
      return (
        <Text style={styles.textView}>
          {'手機: ' + this.props.items.mobile}
        </Text>
      );
    } else {
      return <Text style={styles.textView}>{'手機: N/A'}</Text>;
    }
  }

  renderTel() {
    if (this.props.items.tel != '') {
      return (
        <Text style={styles.textView}>{'電話: ' + this.props.items.tel}</Text>
      );
    } else {
      return <Text style={styles.textView}>{'電話: N/A'}</Text>;
    }
  }

  rentReturn(rent) {
    var newRent = rent.slice(rent.indexOf('$'));
    return newRent.replace(/\s/g, '');
  }

  renderName() {
    var name = this.props.items.estate + ', ';
    if (this.props.items.phase != '') {
      name = name + this.props.items.phase + '期, ';
    }
    if (this.props.items.bldg != '') {
      name = name + this.props.items.bldg + ', ';
    }
    if (this.props.items.block != '') {
      name = name + this.props.items.block + '座, ';
    }
    if (this.props.items.fl != '') {
      name = name + this.props.items.fl + ', ';
    }
    if (this.props.items.room != '') {
      name = name + this.props.items.room + '室';
    }
    return name;
  }

  render() {
    return (
      <TouchableOpacity
        style={{
          marginTop: 10,
          marginBottom: 10,
          marginLeft: 10,
          marginRight: 10,
        }}
        onPress={this.props.onPress && this.props.onPress}>
        <Text style={[styles.textView, {fontSize: 22, color: 'black'}]}>
          {this.props.items.name}
        </Text>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
          }}>
          <View style={{flex: 0.65}}>
            <Text style={styles.textView}>
              {'地區： '}
              <Text style={([styles.textView], {color: 'black'})}>
                {this.props.items.loc}
              </Text>
            </Text>

            <Text style={styles.textView}>
              {'面積： '}
              <Text style={([styles.textView], {color: 'black'})}>
                {this.props.items.area}
              </Text>
            </Text>

            <Text style={styles.textView}>
              {'尺價： '}
              <Text style={([styles.textView], {color: 'black'})}>
                {'HKD ' + this.props.items.unitPrice.replace('@', '')}
              </Text>
            </Text>
            <Text style={styles.textView}>
              {'層數： '}
              <Text style={([styles.textView], {color: 'black'})}>
                {this.props.items.floor}
              </Text>
            </Text>
            <Text style={styles.textView}>
              {'類型： '}
              <Text style={([styles.textView], {color: 'black'})}>
                {this.props.items.type}
              </Text>
            </Text>
            <Text style={styles.textView}>
              {'消息來源： '}
              <Text style={([styles.textView], {color: 'black'})}>
                {this.props.items.info}
              </Text>
            </Text>
            <Text style={styles.textView}>
              {'日期： '}
              <Text style={([styles.textView], {color: 'black'})}>
                {this.props.items.date}
              </Text>
            </Text>
          </View>
          <View style={{flex: 0.35, marginTop: 10}}>
            <Text style={styles.textView}>{'租屋成交價： '}</Text>
            <Text style={[styles.textView, {color: 'black', fontSize: 18}]}>
              {'HKD ' + this.rentReturn(this.props.items.price)}
            </Text>
          </View>
        </View>
        <View
          style={{
            height: 1,
            width: width - 20,
            backgroundColor: colors.textColor,
            marginTop: 15,
          }}
        />
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textView: {
    marginTop: 3,
    fontFamily: Fonts.ubuntu,
    color: colors.textColor,
    fontSize: 16,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  button: {
    borderWidth: 1,
    borderColor: '#000000',
    margin: 5,
    padding: 5,
    width: '70%',
    backgroundColor: '#DDDDDD',
    borderRadius: 5,
  },
  textField: {
    borderWidth: 1,
    borderColor: '#AAAAAA',
    margin: 5,
    padding: 5,
    width: '70%',
  },
  spacer: {
    height: 10,
  },
  title: {
    fontWeight: 'bold',
    fontSize: 20,
    textAlign: 'center',
  },
});
