import React, { Component } from "react";

import {
  Button,
  View,
  Text,
  TouchableOpacity,
  FlatList,
  ActivityIndicator,
  Dimensions,
  StyleSheet,
  Image,
  ImageBackground,
  NetInfo,
  AppState
} from "react-native";

import { Shadow } from "react-native-shadow";
import Icon from "react-native-vector-icons/Ionicons";
import { RkButton, RkTheme } from "react-native-ui-kitten";

import { connect } from "react-redux";

import { bindActionCreators } from "redux";

import * as Actions from "../store/actions"; //Import your actionss
import ImageOverlay from "react-native-image-overlay";

import { createStore } from "redux";
import PTRView from "react-native-pull-to-refresh";
import { Provider } from "react-redux";
import { ScrollView } from "react-native-gesture-handler";
const SCREEN_HEIGHT = Dimensions.get("window").height;
const SCREEN_WIDTH = Dimensions.get("window").width;
import { Card, Divider } from "react-native-elements";

import RNMaterialShadows from "react-native-material-shadows";

import IconFA from "react-native-vector-icons/FontAwesome5";

class Home extends Component {
  _handleConnectionChange = isConnected => {
    // this.props.dispatch(connectionState({ status: isConnected }));
    console.log("fck that");
  };
  _refresh() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve();
      }, 2000);
    });
  }
  _callApi() {
    this.props.getUserInfo(this.props.token);
  }
  constructor(props) {
    super(props);

    this.state = {
      token: { valid: false },
      logged: true,
      onHold: true,
      user: { Name: "" },
      userDetails: {},
      appState: AppState.currentState
    };
  }
  handleConnectivityChange = () => {
    console.log("asdasdasdasdasd");
  };

  componentDidMount() {
    //  NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);

    // this.props.hold();
    console.log("hold" + this.props.onHold);
    //this.props.logoutUser();

    //console.log(this.props.token);

    this.props.getUserInfo(this.props.token);

    //console.log('logged:'+this.props.logged);

    //console.log(th2is.props
    this.props.getEvents(this.props.user);
  }
  componentWillUnmount() {}

  bClick() {
    //this.props.logoutUser();

    let a = {};
    // this.setState({ user: this.props.user });
    // console.log(this.props.user)
    //

    //var navigate  = this.props.navigation.navigate
  }
  _update = () => {
    this.props.getUserInfo(this.props.token);
    this.props.getEvents(this.props.user);
  };

  render() {
    const { navigate } = this.props.navigation;

    if (this.props.onHold) {
      return (
        <View>
          <Text>lollsss {this.props.onHold}</Text>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      );
    }
    if (this.props.logged) {
      return (
        <PTRView onRefresh={this._update}>
          <ScrollView style={{ backgroundColor: "#eeeeee" }}>
            <View>
              <ImageBackground
                opacity={0.9}
                source={require("../assets/img/bg_3.jpg")}
                style={{
                  width: "100%",

                  //  marginTop:150,
                  backgroundColor: "rgba(255,255,255,1)"
                }}
              >
                <View style={styles.homeHeader}>
                  <View style={styles.userImageContainer}>
                    <Image
                      style={styles.userImage}
                      source={{ uri: "https://i.imgur.com/XXJ7LxV.jpg" }}
                    />
                  </View>
                  {this.props.user != undefined && (
                    <Text style={styles.userText}>{this.props.user.Name}</Text>
                  )}
                  <Text style={styles.userTextSub}>
                    {this.props.user.Company}
                  </Text>
                </View>
              </ImageBackground>

              <View style={styles.userStats}>
                <View style={{ backgroundColor: "orange" }}>
                  <Text style={styles.userStatsTitle}>
                    O que inclui o meu bilhete?
                  </Text>
                </View>
                <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
                <View style={styles.colBilhete}>
                  <Text style={styles.titleBilhete}>Acesso </Text>
                <FlatList
                  data={this.props.acesso}
                  renderItem={({item}) => 
                  <View style={styles.boxStyle}>
                  <Text><IconFA name="check" size={18} color={'#CC1A17'}/>   {item}</Text>
                  </View>}
                />
                </View>
                <View style={styles.colBilhete}>
                  <Text  style={styles.titleBilhete}>Alojamento</Text>
<FlatList
                  data={this.props.alojamento}
                  renderItem={({item}) => 
                  <View style={styles.boxStyle}>
                  <Text><IconFA name="check" size={18} color={'#CC1A17'}/>   {item}</Text>
                  </View>}
                />      
                </View>
                <View style={styles.colBilhete}>
                  <Text  style={styles.titleBilhete}>Alimentação</Text>
                <FlatList
            
            data={this.props.alimentacao}
            renderItem={({item}) => 
            <View style={styles.boxStyle}>
            <Text><IconFA name="check" size={18} color={'#CC1A17'}/>   {item}</Text>
            </View>}
          />
                </View>
                

      </View>
              </View>

              <View>
                <View
                  style={{
                    margin: 10,
                    marginTop: 20,
                    backgroundColor: "white",
                    borderRadius: 3
                  }}
                >
                  <View
                    style={{
                      backgroundColor: "#CC1A17",
                      flex: 1,
                      flexDirection: "row"
                    }}
                  >
                    <View style={{ width: "79%" }}>
                      <Text
                        style={{
                          fontSize: 25,
                          color: "white",
                          margin: 10,
                          fontWeight: "bold",
                          marginBottom: 0
                        }}
                      >
                        Os tones
                      </Text>
                      <Text
                        style={{
                          color: "white",
                          marginLeft: 10,
                          marginBottom: 5
                        }}
                      >
                        5/6 elementos
                      </Text>
                    </View>
                    <View
                      style={{
                        alignItems: "center",
                        alignContent: "center",
                        alignSelf: "center"
                      }}
                    >
                      <IconFA name="plus" color={"white"} size={30} />
                      <Text style={{ color: "white" }}>Adicionar</Text>
                    </View>
                  </View>

                  <View>
                    <View style={{ flex: 1 }}>
                      <View style={styles.user}>
                        <View style={styles.userLogo}>
                          <IconFA name="user" size={40} />
                        </View>
                        <View style={styles.userT}>
                          <Text style={styles.userName}>Henrique Dias</Text>
                          <Text>AFFJASDXZ</Text>
                        </View>

                        <TouchableOpacity style={styles.userRemove}>
                          <Text style={{ fontWeight: "bold" }}>rm equipa</Text>
                        </TouchableOpacity>
                      </View>
                      <Divider style={{ backgroundColor: "black" }} />
                      <View style={styles.user}>
                        <View style={styles.userLogo}>
                          <IconFA name="user" size={40} />
                        </View>
                        <View style={styles.userT}>
                          <Text style={styles.userName}>Henrique Dias</Text>
                          <Text>AFFJASDXZ</Text>
                        </View>

                        <TouchableOpacity style={styles.userRemove}>
                          <IconFA name="times" color={"#CC1A17"} size={30} />
                          <Text>remover</Text>
                        </TouchableOpacity>
                      </View>
                      <Divider style={{ backgroundColor: "black" }} />
                      <View style={styles.user}>
                        <View style={styles.userLogo}>
                          <IconFA name="user" size={40} />
                        </View>
                        <View style={styles.userT}>
                          <Text style={styles.userName}>Henrique Dias</Text>
                          <Text>AFFJASDXZ</Text>
                        </View>

                        <TouchableOpacity style={styles.userRemove}>
                          <IconFA name="times" color={"#CC1A17"} size={30} />
                          <Text>remover</Text>
                        </TouchableOpacity>
                      </View>
                      <Divider style={{ backgroundColor: "black" }} />
                      <View style={styles.user}>
                        <View style={styles.userLogo}>
                          <IconFA name="user" size={40} />
                        </View>
                        <View style={styles.userT}>
                          <Text style={styles.userName}>Henrique Dias</Text>
                          <Text>AFFJASDXZ</Text>
                        </View>

                        <TouchableOpacity style={styles.userRemove}>
                          <IconFA name="times" color={"#CC1A17"} size={30} />
                          <Text>remover</Text>
                        </TouchableOpacity>
                      </View>
                      <Divider style={{ backgroundColor: "black" }} />
                      <View style={styles.user}>
                        <View style={styles.userLogo}>
                          <IconFA name="user" size={40} />
                        </View>
                        <View style={styles.userT}>
                          <Text style={styles.userName}>Henrique Dias</Text>
                          <Text>AFFJASDXZ</Text>
                        </View>

                        <TouchableOpacity style={styles.userRemove}>
                          <IconFA name="times" color={"#CC1A17"} size={30} />
                          <Text>remover</Text>
                        </TouchableOpacity>
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </ScrollView>
        </PTRView>
      );
    } else {
      return (
        <View>
          <Text>sem permissões para aceder aqui</Text>
        </View>
      );
    }
  }
}

const styles = StyleSheet.create({
  titleBilhete:{
    textAlign:'center',
    fontSize:15,
    fontWeight:'bold',
    marginBottom:10
  },
  colBilhete:{
    width:'33%',
    padding:10
  },
  boxStyle: {
    
    
   padding:10,
    borderWidth: 1, 
    marginBottom: 5,
    borderColor:'#CC1A17'
  
  },
  userName: {
    fontSize: 16,
    fontWeight: "bold"
  },
  userRemove: {
    alignContent: "center",
    alignItems: "center",

    alignSelf: "center"
  },
  userT: {
    margin: 10,

    width: "55%"
    // backgroundColor: "red"
  },
  userLogo: {
    paddingLeft: 10,

    margin: 10
  },
  user: {
    alignSelf: "center",
    flex: 1,
    flexDirection: "row",

    margin: 10,

    marginTop: 5,
    width: "100%"
  },
  userBoxText: {
    color: "white",
    fontWeight: "bold"
  },
  userStatsBoxIcon: {
    color: "white"
  },
  userStatsBox: {
    flex: 1,
    backgroundColor: "white",
    flexDirection: "row"
  },
  userBox: {
    alignItems: "center",
    justifyContent: "center",
    width: "33%"
  },
  userCurriculum: {
    paddingTop: 5,
    color: "red",
    fontWeight: "bold",
    fontSize: 15
  },
  userBioRow: {
    flex: 1,
    flexDirection: "row",
    padding: 10
  },
  userBioText: {},
  userBioLogo: {
    marginLeft: SCREEN_WIDTH * 0.05,
    width: SCREEN_WIDTH * 0.15
  },

  userTextSub: {
    backgroundColor: "rgba(0,0,0,0.7)",
    color: "white"
  },
  userText: {
    backgroundColor: "rgba(0,0,0,0.7)",
    color: "white",
    fontWeight: "bold",
    fontSize: 20
  },
  homeHeader: {
    flex: 1,

    height: SCREEN_HEIGHT * 0.3,
    justifyContent: "center",
    alignItems: "center"
  },
  userImage: {
    width: 110,
    height: 110,
    borderWidth: 1,
    borderRadius: 5,
    borderWidth: 2,
    borderColor: "white"
  },
  userBio: {
    flex: 1,
    padding: 10,
    margin: 9,
    backgroundColor: "white",
    // height: SCREEN_HEIGHT*0.20,
    color: "black",
    borderRadius: 5
  },
  userStats: {
    backgroundColor: "white",
    //height: SCREEN_HEIGHT * 0.2,
    //  padding: 10,
    margin: 10,
    borderRadius: 5,
    marginTop: 10,
    marginBottom: 0
  },
  userStatsTitle: {
    margin: 10,
    color: "white",
    fontSize: 17,
    fontWeight: "bold",
    padding: 1
  },
  userImageContainer: {
    alignSelf: "center"

    // transform: [{ rotate: '-15deg'}],
  }
});
function mapStateToProps(state, props) {
  return {
    token: state.apiReducer.token,
    user: state.apiReducer.user,
    logged: state.apiReducer.logged,
    userDetails: state.apiReducer.userDetails,
    onHold: state.apiReducer.onHold,
    bilhete: state.apiReducer.bilhete,
    alimentacao: state.apiReducer.alimentacao,
    alojamento: state.apiReducer.alojamento,
    acesso: state.apiReducer.acesso
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(Actions, dispatch);
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);