import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Image,
  ScrollView,
  Alert,
} from 'react-native';
import {
  createStackNavigator,
  CardStyleInterpolators,
} from 'react-navigation-stack';
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 AddTut from '../tutorial/addTut';
import NaviBar from '../../components/navi-bar';
import Toast, {DURATION} from 'react-native-easy-toast';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import Migrations from '../../services/realm/Mirgrations';
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 Add extends Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
    Global.instance = this;
  }
  static navigationOptions = {
    gesturesEnabled: false,
    cardStyleInterpolator: props =>
      CardStyleInterpolators.forVerticalIOS(props),
  };

  renderIcon(items) {
    return (
      <TouchableOpacity
        style={{justifyContent: 'center', alignItems: 'center'}}>
        <Icon name={items.icon} size={50} solid color={colors.mainColor} />
        <Text style={{fontFamily: Fonts.ubuntu, marginTop: 10}}>
          {items.title}
        </Text>
      </TouchableOpacity>
    );
  }

  async componentDidMount() {
    await this.store.startAddTut();
    if (this.store.logined) {
      if (this.store.loginUserData.data.member.phone == null) {
        Alert.alert('', this.store.text.papnf, [
          {text: '取消', onPress: () => history.goBack(this)},
          {
            text: '加入',
            onPress: async () => {
              await history.goBack(this);
              var data = {
                vercode: '',
                fullname: '',
                email: '',
                gender: 'na',
                countryCode: '852',
                chara: 'owner',
                age: 'na',
                thirdParty: true,
                pwd: '',
                phone: '',
                refcode: '',
                ownerPhone: '', // 如果char係租客就會有，OWNER就NULL
              };
              history.push(this, '/signUpVerify', {
                signupData: data,
                addphone: true,
              });
            },
          },
        ]);
      }
    }
  }

  renderButton() {
    var list = [
      {title: this.store.text.addApartment, icon: 'building'},
      {
        title: this.store.text.add + this.store.text.addContract,
        icon: 'file-contract',
      },
      {
        title: this.store.text.add + this.store.text.problemRecord,
        icon: 'exclamation-triangle',
      },
   
    ];
    return list.map((items, index) => {
      if (!this.store.user.memberType == 0 && items.icon == 'building') {
        return null;
      } else {
        return (
          <TouchableOpacity
            style={{
              borderTopWidth: 1,
              borderColor: colors.line2Color,
              flexDirection: 'row',
              height: 80,
              width: width,
              alignItems: 'center',
            }}
            onPress={() => {
              this.clickAction(index);
            }}>
            <View
              style={{
                flex: 0.2,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Icon
                name={items.icon}
                size={35}
                solid
                color={colors.mainColor}
                style={{marginLeft: 5}}
              />
            </View>
            <View style={{flex: 0.8}}>
              <Text style={{fontFamily: Fonts.ubuntu, fontSize: 20}}>
                {'+ ' + items.title}
              </Text>
            </View>
          </TouchableOpacity>
        );
      }
    });
  }

  async clickAction(which) {
    switch (which) {
      case 0:
        await history.goBack(this);
        await history.push(this, '/apartmentDetails', {create: true});
        break;
      case 1:
        if (this.store.logined) {
          if (this.store.loginUserData.data.member.hasOwnProperty('sign')) {
            await history.goBack(this);
            await history.push(this, '/selectApartment', {which: 'contract'});
          } else {
            this.refs.toast.show('Please upload the signature');
          }
        } else {
          this.goToSignIn();
          //this.refs.toast.show('Please Login');
        }

        break;
      case 2:
        if (this.store.logined) {
          await history.goBack(this);
          await history.push(this, '/selectApartment', {which: 'problem'});
        } else {
          //this.refs.toast.show('Please Login');
          this.goToSignIn();
        }

        break;
      case 3:
        if (this.store.logined) {
          await history.goBack(this);
          await history.push(this, '/selectApartment', {which: 'problem'});
        } else {
          //this.refs.toast.show('Please Login');
          this.goToSignIn();
        }

        break;
    }
  }

  renderBuilding() {
    if (this.store.user.memberType == 0) {
      return (
        <TouchableOpacity
          style={styles.iconView}
          onPress={() => {
            this.clickAction(0);
          }}>
          <Icon name="building" size={50} solid color={colors.mainColor} />
          <Text style={styles.text}>{this.store.text.addApartment}</Text>
        </TouchableOpacity>
      );
    } else {
      return null;
    }
  }

  goToSignIn() {
    Alert.alert(
      '',
      this.store.text.pleaseLogin,
      [
        {
          text: this.store.text.cancel,
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {
          text: this.store.text.login,
          onPress: () => {
            history.push(this, '/signin', {icon: true});
          },
        },
      ],
      {cancelable: false},
    );
  }

  render() {
    const object = [
      {icon: 'building', title: this.store.text.addApartment},
      {icon: 'file-contract', title: this.store.text.addContract},
    ];
    return (
      <View style={{flex: 1, backgroundColor: colors.mainColor}}>
        <AddTut />
        {/* <TouchableOpacity style = {{height:30,width:width,justifyContent:'center',alignItems:'center',backgroundColor:colors.mainColor}}
        onPress = {()=>{history.goBack(this)}}>
           <Icon name='sort-down' solid size = {20} color = {'white'}/>
        </TouchableOpacity>
        */}
        <View
          style={{
            flex: 1,
            backgroundColor: 'white',
            borderTopRightRadius: 40,
            borderTopLeftRadius: 40,
          }}>
          <TouchableOpacity
            style={{
              height: 50,
              width: width,
              justifyContent: 'center',
              alignItems: 'center',
            }}
            onPress={() => {
              history.goBack(this);
            }}>
            <View
              style={{
                backgroundColor: colors.line2Color,
                width: 150,
                height: 5,
                borderRadius: 10,
              }}
            />
          </TouchableOpacity>
          <View
            style={{
              justifyContent: 'center',
              alignItems: 'center',
              width: width,
            }}>
            <Text style={{fontFamily: Fonts.ubuntu, fontSize: 20}}>
              {this.store.text.add}
            </Text>
          </View>

          <ScrollView style={{flex: 1, marginTop: 20}}>
            {this.renderButton()}
            <View
              style={{
                width: width,
                height: 1,
                backgroundColor: colors.line2Color,
              }}
            />
          </ScrollView>
        </View>
        <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',
  },
});
