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 {inject, observer} from 'mobx-react';
import LoadingView from '../../common/loading';
import {queryUser} from '../../services/realm/realmManger';
import Swiper from 'react-native-swiper';
import Global from '../../services/Global';
import AddFunction from '../../common/addFunction';
import Toast, {DURATION} from 'react-native-easy-toast';
import {width, height} from '../../common/screen';
import {observable} from 'mobx';
@inject('appStore')
@observer
export default class SelectContract extends Component {
  @observable
  contractData = null;
  constructor(props) {
    super(props);
    this.store = props.appStore;
    Global.instance = this;
  }
  async componentWillMount() {
    this.contractData = await this.store.checkContract(
      this.props.navigation.state.params.apartmentData.id,
    );
    console.log(this.contractData);
  }
  static navigationOptions = {
    gesturesEnabled: 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>
    );
  }

  apartmentRender() {
    return this.store.apartmentsData.map((items, index) => {
      console.log(items);
      return (
        <View style={{width: width, justifyContent: 'center'}}>
          <View style={{margin: 10}}>
            <Text style={{fontFamily: Fonts.ubuntu, color: colors.textColor}}>
              物業租賃契約
            </Text>
            <View
              style={{
                height: 1,
                width: width - 20,
                backgroundColor: colors.mainColor,
                marginTop: 10,
              }}
            />
          </View>
        </View>
      );
    });
  }

  async clickAction(which) {
    switch (which) {
      case 0:
        await history.goBack(this);
        await history.push(this, '/apartmentDetails', {create: true});
        break;
    }
  }

  selectAction(index) {
    switch (index) {
      case 0:
        if (this.contractData != null) {
          if (this.store.loginUserData.data.member.chara == 'tenant') {
            if (this.contractData.contracts.length > 0) {
              history.push(this, '/selectContracts', {
                contract: this.contractData,
              });
            } else {
              this.refs.toast.show('have no contract yet');
            }
          } else {
            if (this.contractData.contracts.length > 0) {
              history.push(this, '/selectContracts', {
                contract: this.contractData,
              });
            } else {
              if (this.contractData.hasOwnProperty('tenant')) {
                //history.push(this,'/newContractData',{apartmentData:this.props.navigation.state.params.apartmentData})
                this.store.getService(
                  this,
                  this.props.navigation.state.params.apartmentData,
                );
              } else {
                this.refs.toast.show('Please add tenant first');
              }
            }
          }
        }
        break;

      case 1:
        history.push(this, '/representativeContractData', {
          apartmentData: this.props.navigation.state.params.apartmentData,
        });
        break;
    }
  }

  renderContract() {
    const contract = [
      '物業租賃契約',
      '代他人簽署合約',
      '終止租約協議書',
      '業主收樓通知合約',
      '租客退租書',
    ];
    return contract.map((items, index) => {
      return (
        <TouchableOpacity
          style={{width: width, justifyContent: 'center'}}
          onPress={() => {
            this.selectAction(index);
          }}>
          <View style={{margin: 10}}>
            <Text style={{fontFamily: Fonts.ubuntu, color: colors.textColor}}>
              {items}
            </Text>
            <View
              style={{
                height: 1,
                width: width - 20,
                backgroundColor: colors.mainColor,
                marginTop: 10,
              }}
            />
          </View>
        </TouchableOpacity>
      );
    });
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <LoadingView visible={this.store.loading} />
        <BackHeader instance={this} back={true} />
        <ScrollView>{this.renderContract()}</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',
  },
});
