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 FontAwsome5Icon from 'react-native-vector-icons/FontAwesome5';
import {observable} from 'mobx';
import {inject, observer} from 'mobx-react';
import {ScrollView} from 'react-native-gesture-handler';
const {width, height} = Dimensions.get('window');
@inject('appStore')
@observer
export default class AddTut extends Component {
  @observable
  index = 0;
  @observable
  isBlinking = true;
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  render() {
    return (
      <Modal
        transparent={false}
        animationType={'none'}
        visible={this.store.addtutVisable}
        onRequestClose={() => {
          console.log('c lose modal');
        }}>
        <View style={styles.modalBackground}>
          <Text
            style={{
              color: 'white',
              fontSize: 25,
              fontFamily: Fonts.ubuntu,
              fontWeight: 'bold',
              marginTop: 60,
            }}>
            {'新增功能'}
          </Text>
          <ScrollView style={{marginTop: 40, flex: 0.8}}>
            <View style={{alignItems: 'center'}}>
              {this.store.user.memberType == 0 ? (
                <View style = {{alignItems: 'center',width:width}}>
                  <View
                    style={{
                      marginTop: 20,
                      flexDirection: 'row',
                      backgroundColor: 'white',
                      height: 80,
                      width: width - 60,
                      alignItems: 'center',
                      justifyContent: 'center',
                      borderRadius: 30,
                    }}>
                    <View
                      style={{
                        justifyContent: 'center',
                        alignItems: 'center',
                      }}>
                      <FontAwsome5Icon
                        name={'building'}
                        size={35}
                        solid
                        color={colors.mainColor}
                        style={{marginLeft: 5}}
                      />
                    </View>
                    <View style={{marginLeft: 10}}>
                      <Text style={{fontFamily: Fonts.ubuntu, fontSize: 20}}>
                        {'+ ' + this.store.text.addApartment}
                      </Text>
                    </View>
                  </View>
                  <View style={{width: width}}>
                    <Text
                      style={{
                        color: 'white',
                        fontSize: 19,
                        fontFamily: Fonts.ubuntu,
                        marginLeft: 20,

                        marginTop: 10,
                      }}>
                      {'新增物業，加入物業相片及文件，方便管理'}
                    </Text>
                  </View>
                </View>
              ) : (
                <View />
              )}

              <View
                style={{
                  marginTop: 30,
                  flexDirection: 'row',
                  backgroundColor: 'white',
                  height: 80,
                  width: width - 60,
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: 30,
                }}>
                <View
                  style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <FontAwsome5Icon
                    name={'file-contract'}
                    size={35}
                    solid
                    color={colors.mainColor}
                    style={{marginLeft: 5}}
                  />
                </View>
                <View style={{marginLeft: 10}}>
                  <Text style={{fontFamily: Fonts.ubuntu, fontSize: 20}}>
                    {'+ ' + this.store.text.add + this.store.text.addContract}
                  </Text>
                </View>
              </View>
              <View style={{width: width}}>
                <Text
                  style={{
                    color: 'white',
                    fontSize: 19,
                    fontFamily: Fonts.ubuntu,
                    marginLeft: 20,

                    marginTop: 10,
                  }}>
                  {this.store.user.memberType == 0
                    ? '可快捷添加合約，網上簽署'
                    : '查看合約及網上簽署'}
                </Text>
              </View>
              <View
                style={{
                  marginTop: 30,
                  flexDirection: 'row',
                  backgroundColor: 'white',
                  height: 80,
                  width: width - 60,
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: 30,
                }}>
                <View
                  style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <FontAwsome5Icon
                    name={'exclamation-triangle'}
                    size={35}
                    solid
                    color={colors.mainColor}
                    style={{marginLeft: 5}}
                  />
                </View>
                <View style={{marginLeft: 10}}>
                  <Text style={{fontFamily: Fonts.ubuntu, fontSize: 20}}>
                    {'+ ' + this.store.text.add + this.store.text.problemRecord}
                  </Text>
                </View>
              </View>
              <View style={{width: width}}>
                <Text
                  style={{
                    color: 'white',
                    fontSize: 19,
                    fontFamily: Fonts.ubuntu,
                    marginLeft: 20,

                    marginTop: 10,
                  }}>
                  {'方便，清晰記錄問題，保障雙方'}
                </Text>
              </View>
            </View>
          </ScrollView>
          <View style={{flex: 0.2, justifyContent: 'center'}}>
            <TouchableOpacity
              style={{
                width: width - 60,
                backgroundColor: 'white',
                height: 60,
                borderRadius: 30,
                justifyContent: 'center',
                alignItems: 'center',
              }}
              onPress={() => {
                this.store.addtutVisable = false;
              }}>
              <Text
                style={{
                  color: colors.mainColor,
                  fontSize: 19,
                  fontFamily: Fonts.ubuntu,
                }}>
                {'明白'}
              </Text>
            </TouchableOpacity>
          </View>
        </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,
  },
});
