import React, {Component} from 'react';
import {
  View,
  Dimensions,
  StyleSheet,
  ActivityIndicator,
  Modal,
  TouchableOpacity,
  TouchableHighlight,
  Text,
  Image,
} 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 HomeTut2 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;
    }
  }

  render() {
    return (
      <Modal
        transparent={false}
        animationType={'none'}
        visible={this.store.hometutVisable}
        onRequestClose={() => {
          console.log('c lose modal');
        }}>
        <View style={styles.modalBackground}>
          <Text
            style={{
              color: 'white',
              fontSize: 25,
              fontFamily: Fonts.ubuntu,
              fontWeight: 'bold',
              marginTop: 40,
            }}>
            {'歡迎使用RENT CHAT!'}
          </Text>
          <Image
            source={require('../../assets/images/tu2.png')}
            style={{width: width - scale(30), height: scale(140), marginTop: 20}}
            resizeMode={'contain'}
          />
          <View style={{width: width}}>
            <Text
              style={{
                color: 'white',
                fontSize: 19,
                fontFamily: Fonts.ubuntu,
                marginLeft: 20,

                marginTop: 10,
              }}>
              {'若有疑難，可·與客服進行即時通訊！'}
            </Text>
          </View>
          <Image
            source={require('../../assets/images/tu1.png')}
            style={{width: width - scale(30), height: scale(200), marginTop: 20}}
            resizeMode={'contain'}
          />
          <View style={{width: width}}>
            <Text
              style={{
                color: 'white',
                fontSize: 19,
                fontFamily: Fonts.ubuntu,
                marginLeft: 20,

                marginTop: 10,
              }}>
              {'隨時隨地，管理你的物業！'}
            </Text>
          </View>
          <TouchableOpacity
            style={{
              width: width - 60,
              backgroundColor: 'white',
              height: 60,
              borderRadius: 30,
              justifyContent: 'center',
              alignItems: 'center',
              marginTop: 50,
            }}
            onPress={() => {
              this.store.hometutVisable = false;
            }}>
            <Text
              style={{
                color: colors.mainColor,
                fontSize: 19,
                fontFamily: Fonts.ubuntu,
              }}>
              {'開始使用'}
            </Text>
          </TouchableOpacity>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.flatten({
  wrapper: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: width,
    height: height,
    backgroundColor: colors.mainColor,
  },
  loading: {
    position: 'absolute',
    top: height / 2 - 100,
    left: width / 2 - 70,
    width: 140,
    height: 140,
  },
  modalBackground: {
    flex: 1,
    alignItems: 'center',

    backgroundColor: colors.mainColor,
  },
  activityIndicatorWrflapper: {
    backgroundColor: colors.mainColor,
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
});
