import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet, Image,FlatList,ScrollView } from "react-native";
import FastImage from 'react-native-fast-image'
import Icon from "react-native-vector-icons/FontAwesome5";
import BackHeader from '../../components/backHeader'
import { colors } from "../../assets/styles/colors-theme";
import { Fonts } from '../../assets/styles/fonts-theme'
import history from "../../common/history";
import LoadingView from '../../common/loading';
import NaviBar from "../../components/navi-bar";
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 { width, height } from "../../common/screen";
import HTML from 'react-native-render-html';
import AddFunction from '../../common/addFunction'
import { UserSchemea, ApartmentSchemea, DocSchemea,NotificationSchemea } from '../../services/realm/schemeas'
import * as rssParser from 'react-native-rss-parser';

import Realm from 'realm'
import { observable } from "mobx";
import { func } from "prop-types";
let realm = new Realm({ schema: [UserSchemea, ApartmentSchemea, DocSchemea,NotificationSchemea] });
@inject("appStore")
@observer
export default class HelpSelect extends Component<Props> {
 @observable
 newsData = ''

  constructor(props) {
    super(props);
    this.store = props.appStore;
  }
  componentWillMount() {
   
  }

   renderButton(){
       let buttons = [{title:this.store.text.mediatorIntervention},
                          {title:this.store.text.repairAssistance},
                          // {title:this.store.text.rentOut},
                          {title:this.store.text.appsProblem},]

                          return(
                            <View style={{ width: width, alignItems: 'center' }}>
                            {buttons.map((items,index)=>{
                                 return(
                                    <TouchableOpacity
                                    onPress={()=>{this.store.goToChat("Helper", this);}}
                                    style={{
                                      marginTop: 50,
                                      marginBottom: 20,
                                      backgroundColor: colors.mainColor,
                                      width: width - 60, height: 60,
                                      borderRadius: 10, shadowColor: "#000",
                                      justifyContent: 'center',
                                      alignItems: 'center',
                                      shadowOffset: {
                                        width: 0,
                                        height: 2,
                                      },
                                      shadowOpacity: 0.23,
                                      shadowRadius: 2.62,
                            
                                      elevation: 4,
                                    }}>
                                    <Text style={{ color: 'white', fontFamily: Fonts.ubuntu, fontSize: 18 }}>
                                     {items.title}
                                    </Text>
                                  </TouchableOpacity>
                                 )
                            })}
                           
                            </View>
                          )
   }
  

  render() {
    return (
      <View style={styles.container}>
        <BackHeader instance={this} back={true} />
        <LoadingView visible={this.store.loading} />
       {this.renderButton()}
      </View>
    );
  }


}


const styles = StyleSheet.create({
  container: {
    flex: 1,

  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  button: {
    borderWidth: 1,
    borderColor: "#000000",
    margin: 5,
    padding: 5,
    width: "70%",
    backgroundColor: "#DDDDDD",
    borderRadius: 5,
  },
  textField: {
    borderWidth: 1,
    borderColor: "#AAAAAA",
    margin: 5,
    padding: 5,
    width: "70%"
  },
  spacer: {
    height: 10,
  },
  title: {
    fontWeight: "bold",
    fontSize: 20,
    textAlign: "center",
  }
});