import React, {Component} from 'react';
import {
  View,
  Dimensions,
  StyleSheet,
  ActivityIndicator,
  Modal,
  TouchableOpacity,
  TouchableHighlight,
  Text,
} from 'react-native';
//import LottieView from 'lottie-react-native';
//import LoadingAnimation from '../assets/animations/loading';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import BlinkView from 'react-native-blink-view';
import {colors} from '../../assets/styles/colors-theme';
import {Fonts} from '../../assets/styles/fonts-theme';
import Icon from 'react-native-vector-icons/Feather';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {observable} from 'mobx';
import {inject, observer} from 'mobx-react';
const {width, height} = Dimensions.get('window');
@inject('appStore')
@observer
export default class HomeTut extends Component {
  @observable
  index = 0;
  @observable
  isBlinking = true;
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  clickAction(type) {
    switch (type) {
      case 'add':
        if (this.index < 2) {
          this.index += 1;
          console.log(this.index);
        } else if (this.index == 2) {
          this.store.hometutVisable = false;
          this.index = 0
        }

        break;

      case 'sub':
        if (this.index > 0) {
          this.index -= 1;
        }
        break;
    }
  }

  tutViewReturn() {
    if (this.store.user.memberType === 0) {
      switch (this.index) {
        case 0:
          return (
            <View
              style={{
                width: width,
                height: height,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <View
                style={{
                  position: 'absolute',
                  right: scale(20),
                  top: scale(80),
                  alignItems: 'center',
                }}>
                <Icon name="arrow-up-right" color="white" size={20} />
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                  }}>
                  與客服對話尋求幫助
                </Text>
              </View>

              <View
                style={{
                  position: 'absolute',
                  left: scale(70),
                  bottom: scale(260),
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                  }}>
                  按此可加入租客
                </Text>
                <Icon name="arrow-down" color="white" size={20} />
              </View>

              <View
                style={{
                  position: 'absolute',
                  left: scale(20),
                  bottom: scale(180),
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                  }}>
                  更改物業資料
                </Text>
                <Icon name="arrow-down" color="white" size={20} />
              </View>

              <View
                style={{
                  position: 'absolute',
                  bottom: scale(180),
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                  }}>
                  與租客對話
                </Text>
                <Icon name="arrow-down" color="white" size={20} />
              </View>

              <View
                style={{
                  position: 'absolute',
                  right: scale(20),
                  bottom: scale(180),
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                    width: 100,
                    textAlign: 'center',
                  }}>
                  開啟物業文件和圖片及交租單據
                </Text>
                <Icon name="arrow-down" color="white" size={20} />
              </View>
            </View>
          );
          break;
        case 1:
          return (
            <View
              style={{
                width: width,
                height: height,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <View
                style={{
                  position: 'absolute',
                  left: scale(10),
                  bottom: scale(100),
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                    width: 130,
                    textAlign: 'center',
                  }}>
                  提供財經新聞，維修公司，租務成交資訊
                </Text>
                <Icon name="arrow-down-right" color="white" size={20} />
              </View>

              <View
                style={{
                  position: 'absolute',
                  right: scale(20),
                  bottom: scale(100),
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                    width: 130,
                    textAlign: 'center',
                  }}>
                  查看業主，租客，客服新增的問題解決記錄
                </Text>
                <Icon name="arrow-down-left" color="white" size={20} />
              </View>
            </View>
          );
          break;
        case 2:
          return (
            <View
              style={{
                width: width,
                height: height,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <View
                style={{
                  position: 'absolute',
                  left: scale(80),
                  bottom: scale(100),
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                    width: 130,
                    textAlign: 'center',
                  }}>
                  增加物業和合同
                </Text>
                <Icon name="arrow-down-right" color="white" size={20} />
              </View>

              <View
                style={{
                  position: 'absolute',
                  right: scale(10),
                  bottom: scale(100),
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                    width: 130,
                    textAlign: 'center',
                  }}>
                  查看個人資料和設定簽名及信用卡等重要資料
                </Text>
                <Icon name="arrow-down-right" color="white" size={20} />
              </View>
            </View>
          );
          break;
      }
    } else {
      switch (this.index) {
        case 0:
          return (
            <View
              style={{
                width: width,
                height: height,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <View
                style={{
                  position: 'absolute',
                  right: scale(20),
                  top: scale(80),
                  alignItems: 'center',
                }}>
                <Icon name="arrow-up-right" color="white" size={20} />
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                  }}>
                  與客服對話尋求幫助
                </Text>
              </View>

              <View
                style={{
                  position: 'absolute',
                  top: scale(250),
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                  }}>
                 輸入業主提供的分享碼，同步資料
                </Text>
                <Icon name="arrow-down" color="white" size={20} />
              </View>
            </View>
          );
          break;
        case 1:
          return (
            <View
              style={{
                width: width,
                height: height,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <View
                style={{
                  position: 'absolute',
                  left: scale(10),
                  bottom: scale(100),
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                    width: 130,
                    textAlign: 'center',
                  }}>
                  提供財經新聞，維修公司，租務成交資訊
                </Text>
                <Icon name="arrow-down-right" color="white" size={20} />
              </View>

              <View
                style={{
                  position: 'absolute',
                  right: scale(20),
                  bottom: scale(100),
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                    width: 130,
                    textAlign: 'center',
                  }}>
                  查看業主，租客，客服新增的問題解決記錄
                </Text>
                <Icon name="arrow-down-left" color="white" size={20} />
              </View>
            </View>
          );
          break;
        case 2:
          return (
            <View
              style={{
                width: width,
                height: height,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <View
                style={{
                  position: 'absolute',
                  left: scale(80),
                  bottom: scale(100),
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                    width: 130,
                    textAlign: 'center',
                  }}>
                  增加物業和合同
                </Text>
                <Icon name="arrow-down-right" color="white" size={20} />
              </View>

              <View
                style={{
                  position: 'absolute',
                  right: scale(10),
                  bottom: scale(100),
                  alignItems: 'center',
                }}>
                <Text
                  style={{
                    color: 'white',
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 15,
                    width: 130,
                    textAlign: 'center',
                  }}>
                  查看個人資料和設定簽名及信用卡等重要資料
                </Text>
                <Icon name="arrow-down-right" color="white" size={20} />
              </View>
            </View>
          );
          break;
      }
    }
  }

  render() {
    return (
      <Modal
        transparent={true}
        animationType={'none'}
        visible={this.store.hometutVisable}
        onRequestClose={() => {
          console.log('c lose modal');
        }}>
        <View style={styles.modalBackground}>
          {/* onPress={()=>{this.store.hometutVisable = false}}> */}

          <TouchableOpacity
            style={{position: 'absolute', right: 20, zIndex: 1}}
            onPress={() => {
              this.clickAction('add');
            }}>
            <BlinkView blinking={this.isBlinking ? true : false} delay={500}>
              <Ionicons color={'white'} name="ios-arrow-forward" size={35} />
            </BlinkView>
          </TouchableOpacity>
          {this.index < 1 ? (
            <View></View>
          ) : (
            <TouchableOpacity
              style={{position: 'absolute', left: 20, zIndex: 1}}
              onPress={() => {
                this.clickAction('sub');
              }}>
              <BlinkView blinking={this.isBlinking ? true : false} delay={500}>
                <Ionicons color={'white'} name="ios-arrow-back" size={35} />
              </BlinkView>
            </TouchableOpacity>
          )}

          {this.tutViewReturn()}

          {/* <TouchableOpacity
              style={{position: 'absolute', right: 7, top: 7}}
              onPress={() => {
               this.store.hometutVisable = false;
              }}>
              <Icon name={'times'} color={colors.mainColor} size={20} />
            </TouchableOpacity> */}
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.flatten({
  wrapper: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: width,
    height: height,
    backgroundColor: 'rgba(100, 0, 0, 0.2)',
  },
  loading: {
    position: 'absolute',
    top: height / 2 - 100,
    left: width / 2 - 70,
    width: 140,
    height: 140,
  },
  modalBackground: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#00000080',
  },
  activityIndicatorWrflapper: {
    backgroundColor: '#FFFFFF',
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
});
