import * as React from 'react';
import {
        View, 
        StyleSheet, 
        Dimensions, 
        Image, 
        ScrollView, 
        Text, 
        Button, 
        TouchableOpacity,
        Picker,
        CheckBox,
        ActivityIndicator,
        SectionList,
        FlatList
    } from 'react-native';

import {TabView, TabBar, SceneMap} from 'react-native-tab-view';
import {
    RkButton, RkCard, RkText,
    RkTheme
} from 'react-native-ui-kitten';
import Timeline from 'react-native-timeline-feed'

import * as Progress from 'react-native-progress';


import {connect} from 'react-redux';

import {bindActionCreators} from 'redux';

import * as Actions from '../store/actions'; //Import your actionss
import Swiper from 'react-native-swiper';

const SCREEN_HEIGHT = Dimensions.get("window").height;
const SCREEN_WIDTH = Dimensions.get("window").width;
import FitImage from 'react-native-fit-image';

import { Dropdown } from 'react-native-material-dropdown';
import {Card, Divider} from 'react-native-elements'
import IconF from "react-native-vector-icons/Foundation"

import LinearGradient from 'react-native-linear-gradient';


const formatObj = (obj) => {

    let a = {};

    a.push({})

    return a

};



  
class choosePath extends React.Component {

    static navigationOptions = ({ navigation }) => ({
     
         headerTitleStyle : {textAlign: 'center',alignSelf:'center'},
            headerStyle:{
                backgroundColor:'rgba(0,0,0,0)',
                shadowRadius:0,
                elevation:0
            },
        });

    state = {
     calendar:{},
     guest:'9'
    };

    componentDidMount() {

       // this.props.getEvents(this.props.user);
       this.props.getAvailableGuestlists(this.props.userDetails.token)
        console.log('didMount');
        console.log(this.props.events);
    }



    _update = () => {
        this.setState({user: this.props.user});
        console.log(this.props.events);
    }


    constructor() {

        super()



        this.data = [



        ]
    }
    getCareerPaths=()=>{

        this.props.getAvailableGuestlists(this.props.userDetails.token)
        console.log(this.props.calendar)
    }
    _keyExtractor = (item, index) => item.id;

    _renderItem = ({item}) => (
        <MyListItem
          id={item.id}
          onPressItem={this._onPressItem}
          selected={!!this.state.selected.get(item.id)}
          title={item.title}
        />
      );
      _onPressItem = (id) => {
        // updater functions are preferred for transactional updates
        this.setState((state) => {
          // copy the map rather than modifying state.
          const selected = new Map(state.selected);
          selected.set(id, !selected.get(id)); // toggle
          return {selected};
        });
      };

    render() {
      

        return (
            <ScrollView style={styles.page}>

               
                {this.state.guest=='9' && <LinearGradient colors={[ '#D95856', '#CC1A17']} style={styles.linearGradient}>
                <Text style={{margin:15,marginBottom:0, fontWeight:'bold', color:'white'}}> Empresa responsável: </Text>
                <View style={styles.companyContainer}>
                      <View style={styles.companyDescription}>
                        <Text style={{fontSize:16, fontWeight:'bold', margin:6, color:'white'}}>Critical Software</Text>
                        <Text style={{margin:6, marginTop:0, color:'white'}}>A CRITICAL Software fornece sistemas e serviços de software para segurança e
aplicações essenciais aos negócios.</Text>
                      </View>
                      <View style={styles.companyLogo}>
                      <FitImage
  source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/8/8a/CSW_Gradiente_rgb.png' }}
  style={styles.fitImage}
/>  
                      </View>
                      </View>
</LinearGradient>}
{this.state.guest=='10' && <LinearGradient colors={[ '#5887FF', '#715AFF']} style={styles.linearGradient}>
                <Text style={{margin:15,marginBottom:0, fontWeight:'bold', color:'white'}}> Empresa responsável: </Text>
                <View style={styles.companyContainer}>
                      <View style={styles.companyDescription}>
                        <Text style={{fontSize:16, fontWeight:'bold', margin:6, color:'white'}}>Altice</Text>
                        <Text style={{margin:6, marginTop:0, color:'white'}}>Altice é uma multinacional neerlandesa de telecomunicações, conteúdos, media, entretenimento e publicidade.</Text>
                      </View>
                      <View style={styles.companyLogo}>
                      <FitImage
  source={{ uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuIfl0Km4mTbCGdJSr4bWn_ApFHnOrjYsmJ4VlBL1OkaIlb93t' }}
  style={styles.fitImage}
/>  
                      </View>
                      </View>
</LinearGradient>}

           
         
                <View style={{flex:1,width:SCREEN_WIDTH*0.7, alignContent:'center'}}>
              

                <View style={styles.pickerCareer}>
                    <Picker
                    selectedValue={this.state.guest}
                   style={{width:'100%'}}
                    onValueChange={(itemValue, itemIndex) =>{
                        this.setState({guest: itemValue})
                        this.props.waitChangeGuest();
                        this.props.changeGuestList(this.props.userDetails.token,itemValue)
                        this.props.waitChangeGuest();
                        this.props.getAvailableSessions(this.props.userDetails.token);
                        
                        
                    }
                    
                    }>
                    <Picker.Item label="Inteligência Artificial" value="9" />
                    <Picker.Item label="Redes e Segurança" value="10" />
                    <Picker.Item label="Data Science" value="15" />
                    <Picker.Item label="Desenvolvimento Web" value="14" />
                    <Picker.Item label="Internet das Coisas" value="12" />
                    <Picker.Item label="Desenvolvimento Mobile" value="11" />   

                    </Picker>
                </View>
                <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
          <ListItem
           
            title={`${item.name.first} ${item.name.last}`}
            subtitle={item.email}
            avatar={{ uri: item.picture.thumbnail }}
           containerStyle={{ borderBottomWidth: 0 }}
          />
        )}
        keyExtractor={item => item.email}
      />

</View >
               {  !this.props.changingGuest &&
                 
                    <View style={styles.block}>
                    
                        <View style={styles.time}>
                            <Text style={
                                {
                                    margin:10,
                                    fontSize:25,
                                    color:'#CC1A17',
                                    marginBottom:0
                                }
                                }>
                            9:00</Text>
                            <Text style={{marginLeft:20}}>até</Text>
                            <Text style={
                                {
                                    margin:10,
                                    fontSize:25,
                                    color:'#CC1A17',
                                    marginTop:5
                                }
                                }>
                            9:30</Text>
                           
                        </View>
                        
                        <View style={styles.sessions}>

                            <View style={styles.session}>

                                <CheckBox
                                style={{margin:10}}
                                value={this.state.checkbox1}
                                onChange={() => this.setState({ checkbox1: !this.state.checkbox1 })}
                                />
                                <TouchableOpacity><View style={styles.sessionInfo}>
                                    <Text style={styles.sessionTitle}>Nome da palestra</Text>
                                    <Text style={{marginTop:10, marginBottom:5}}>12 Lugares disponíveis</Text>
                                    <Progress.Bar color={'#000000'} progress={0.3} unfilledColor={'white'} width={150}/>
                                </View></TouchableOpacity>
                                
                              
                               
                            </View>

                            <Divider style={{ backgroundColor: '#eeeeee' }} />

                            <View style={styles.session}>

<CheckBox
style={{margin:10}}
value={this.state.checkbox1}
onChange={() => this.setState({ checkbox1: !this.state.checkbox1 })}
/>
<TouchableOpacity><View style={styles.sessionInfo}>
    <Text style={styles.sessionTitle}>Nome da palestra</Text>
    <Text style={{marginTop:10, marginBottom:5}}>12 Lugares disponíveis</Text>
    <Progress.Bar color={'#000000'} progress={0.3} unfilledColor={'white'} width={150}/>
</View></TouchableOpacity>



</View>

<Divider style={{ backgroundColor: '#eeeeee' }} />

<View style={styles.session}>

<CheckBox
style={{margin:10}}
value={this.state.checkbox1}
onChange={() => this.setState({ checkbox1: !this.state.checkbox1 })}
/>
<TouchableOpacity><View style={styles.sessionInfo}>
    <Text style={styles.sessionTitle}>Nome da palestra</Text>
    <Text style={{marginTop:10, marginBottom:5}}>12 Lugares disponíveis</Text>
    <Progress.Bar color={'#000000'} progress={0.3} unfilledColor={'white'} width={150}/>
</View></TouchableOpacity>



</View>

<Divider style={{ backgroundColor: '#eeeeee' }} />


                          
                        </View>
                    </View>
               }
               {this.props.changingGuest &&

<ActivityIndicator size="large" color="red"/>
                }

       
    
            </ScrollView>
        );
      }
 
}

const styles = StyleSheet.create({
    companyLogo:{
        backgroundColor:'white',
        margin:20,
        width:SCREEN_WIDTH*0.35,
        borderRadius:3,
        padding:5
    },
    companyDescription:{
      //  backgroundColor:'white',
        margin:20,
        marginRight:0,
        width:SCREEN_WIDTH*0.5, 
        borderRadius:3,
    },
    sessionInfo:{
        margin:5
    },
    sessionTitle:{
        fontSize:15,
       fontWeight:'bold'
    },  
    day:{
        margin:10
    },
    dayText:{
        fontSize:20,
        color: '#CC1A17',
        textAlign: 'center', 
       
    },
    time:{
        alignContent:'center',
        width:SCREEN_WIDTH*0.20,
        backgroundColor:'white'
    },

    block:{

        flex:1,
        flexDirection:'row',
        backgroundColor:'red',
        margin:10,
        borderRadius:5

    },

  companyContainer:{
      flex:1,
     // backgroundColor:'blue',
    
      flexDirection:'row',
      marginTop:0
      

  },

 
  sessions:{
    flex:1,
    flexDirection:'column',
   
    backgroundColor:'white',
   
  },

  page:{
      backgroundColor:'#eeeeee',
    
  },
  pickerCareer:{

   paddingLeft:30,
   paddingRight:30,
      backgroundColor:'white',
      width:SCREEN_WIDTH,

  },
  session:{
    margin:10,
    flex:1,
    flexDirection:'row',
 
  }
   
});



function mapStateToProps(state, props) {

    return {

       // token: state.apiReducer.token,
        user: state.apiReducer.user,
        logged: state.apiReducer.logged,
        events: state.apiReducer.events,
        userDetails: state.apiReducer.userDetails,
        calendar : state.apiReducer.calendar,
        changingGuest : state.apiReducer.changingGuest,
        sessions:state.apiReducer.sessions,


    }
}

function mapDispatchToProps(dispatch) {

    return bindActionCreators(Actions, dispatch);
}

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