import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Image,
  ScrollView,
} 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 Migrations from '../../services/realm/Mirgrations';
import BackHeader from '../../components/backHeader';
import moment from 'moment';
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 SelectContracts extends Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
    Global.instance = this;
  }
  static navigationOptions = {
    gesturesEnabled: false,
  };

  selectAction() {}

  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>
    );
  }

  clickAction(items) {
    var apartmentdata = this.props.navigation.state.params.contract;
    console.log(this.props.navigation.state.params.contract);
    var data = {
      payRentDate: items.payRentDate,
      numberOfkey: items.numberOfkey,
      leaseMonth: items.leaseMonth,
      rentFreePeriod: items.rentFreePeriod,
      noteLeasebackMonth: items.noteLeasebackMonth,
      monthOfpaymentInLieuOfNotice: items.monthOfpaymentInLieuOfNotice,
      atleastRentOfmonth: items.atleastRentOfmonth,
      whoPayManagementFee: items.whoPayManagementFee,
      whoPayGovernemtRate: items.whoPayGovernemtRate,
      whoPayGovernmentRent: items.whoPayGovernmentRent,
      ownerPaymentAc: items.ownerPaymentAc,
      apartment: this.props.navigation.state.params.contract.id,
      apartmentName: this.props.navigation.state.params.contract.name,
      apartmentAddress: items.address,
      ownerId: this.props.navigation.state.params.contract.owner.id,
      ownerName: items.ownerName,
      ownerPhone: items.ownerPhone,
      ownerContactAddress: items.ownerContractAddress,
      tenantName: items.tenantName,
      tenantPhone: items.tenantPhone,
      tenantContactAddress: items.tenantContractAddress,
      signContractDate: moment(items.signContractDate, 'YYYY-MM-DD').toDate(),
      endContractDate: moment(items.endContractDate, 'YYYY-MM-DD').toDate(),
      rent: items.rent,
      rates: items.rates,
      deposit: items.deposit,
      managementFee: items.managementFee,
      id: items.id,
      signed: items.signed,
      appliances: items.appliances,
      key: items.key,
      remark: items.remark,
      ownerSignUri: items.ownerSign,
      stamp: this.stampImageReturn(items),
      tenantSignUri: this.signImageReturn(
        items,
        this.props.navigation.state.params.contract,
      ),
    };

    history.push(this, '/newLease', {contractData: data, showSign: false});
  }

  signImageReturn(items, apartmentdata) {
    console.log(items.signed);
    if (items.signed) {
      return items.tenantSign;
    } else {
      return '';
    }
  }

  stampImageReturn(items) {
    if (items.hasOwnProperty('ownerStamp')) {
      return items.ownerStamp;
    } else {
      return '';
    }
  }

  apartmentRender() {
    return this.props.navigation.state.params.contract.contracts.map(
      (items, index) => {
        console.log(items);
        return (
          <TouchableOpacity
            style={{width: width, justifyContent: 'center'}}
            onPress={() => {
              this.clickAction(items);
            }}>
            <View style={{margin: 10}}>
              {this.list('Contract ID', items.id, colors.textColor)}
              {this.list(
                'Sign Contract Date',
                items.signContractDate,
                colors.textColor,
              )}
              {this.list('Signed', '' + items.signed, 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} />
        <ScrollView>{this.apartmentRender()}</ScrollView>
      </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',
  },
});
