import * as React from 'react';
import {
    View,
    StyleSheet,
    Dimensions,
    Image,
    ScrollView,
    Text,
    Button,
    TouchableOpacity,
    ImageBackground
} from 'react-native';

import {Divider, Icon, Avatar} from 'react-native-elements'
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 NavAbsolute from '../components/Nav';

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 MapView, {PROVIDER_GOOGLE} from 'react-native-maps';

const formatObj = (obj) => {

    let a = {};

    a.push({})

    return a

};


class calendarDetail extends React.Component {

   
    static navigationOptions = ({navigation}) => ({
        header: (
            <NavAbsolute
                navigation={navigation}
               // title={navigation.state.params.info.name}
            />
        ),
    });


    state = {};

    componentDidMount() {

        this.props.getEvents(this.props.user);
        console.log('didMount');
        console.log(this.props.events);
        const {navigation} = this.props;
        const info = navigation.getParam('info', 'error');
        console.log("putas")
        console.log(info)
        
    }


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


    constructor(props) {

        super(props)


        this.data = []
    }

    renderHeader = (info) => {
        return (
            <View style={styles.headerContainer}>
                <View style={styles.coverContainer}>
                    <ImageBackground
                        source={{
                            uri: info.imageUrl,
                        }}
                        style={styles.coverImage}
                    >
                    </ImageBackground>
                </View>
            </View>
        )
    };

    renderDescription = (info) => {
        return (
            <View>
                <View style={styles.header}>
                        <View style={{flexDirection: "row", alignItems: 'center', alignSelf:'center'}}>

                            <View style={styles.timeText}>
                                <Text style={{color: "#CC1A17", fontSize: 15}}>
                                    {info.time === info.timeEnd ? info.time : `${info.time} - ${info.timeEnd}`}
                                </Text>
                            </View>
                        </View>
                        <View><Text style={{margin:10,marginTop:0, fontSize:20, color:'#CC1A17'}}>{info.name}</Text></View>
                     
                        <View style={{margin:10}}>
                          
                            <Progress.Bar color={'#000000'} progress={info.Enrolled / info.MaxAttendees} height={10}
                                          unfilledColor={'white'} width={210}/>
                            <Text >{info.Enrolled} / {info.MaxAttendees}</Text>
                        </View>
                        <Divider style={{backgroundColor: '#000'}}/>
                        <View>
                            <Text style={{fontSize:15, color:'#CC1A17', padding:10}}>Descrição</Text>
                            <Text style={{paddingLeft:10, paddingRigh:10}}></Text>
                        </View>
                </View>

                <View style={styles.block}>
                    <Text style={{fontSize: 20, color: "#CC1A17"}}>Descrição</Text>
                    <Divider style={{backgroundColor: '#000'}}/>
                    <View style={{marginTop: 10}}>
                        <Text>
                            {info.description}
                        </Text>
                    </View>
                </View>
            </View>
        )
    };
/*

    renderMap = () => {
        return (
            <MapView
                provider={PROVIDER_GOOGLE}
                style={{flex: 2}}
                region={{
                    latitude: 40.19092111672049,
                    latitudeDelta: 0.007664297080957283,
                    longitude: -8.410662319511175,
                    longitudeDelta: 0.007551424205303192
                }}
                onRegionChangeComplete={(region) => {

                    console.log(region);

                }}

            />
        )
    };
*/
    renderAttendee = () => {
        return (
            <View style={{backgroundColor: '#fff', height: SCREEN_HEIGHT * 0.1}}>
                <View style={styles.AttendeeContainer}>
                    <View style={styles.leftRow}>
                        <Avatar
                            rounded
                            size="medium"
                            source={{
                                uri: "https://cdn3.iconfinder.com/data/icons/vector-icons-6/96/256-512.png",
                            }}
                        />
                    </View>
                    <View style={styles.centerRow}>
                        <Text style={styles.titleText} numberOfLines={1}>
                            Nome do gajo
                        </Text>
                    </View>
                    <View style={styles.rightRow}>
                        <Icon
                            size={24}
                            name="visibility"
                            type="material-icon"
                            onPress={() => navigation.goBack(null)}
                            color='#000'
                            iconStyle={styles.icon}
                            underlayColor="transparent"
                            underlineColorAndroid="transparent"
                            containerStyle={styles.iconContainer}
                            hitSlop={{top: 15, bottom: 15, left: 15, right: 15}}
                        />
                    </View>
                </View>
            </View>
        );
    };


    render() {
        const {navigation} = this.props;
        const info = navigation.getParam('info', 'error');
      

        return (

            <View style={styles.mainViewStyle}>
                <ScrollView style={styles.scroll}>
                    <View style={styles.container}>
                        <View style={styles.headerContainer}>
                            {this.renderHeader(info)}
                        </View>
                        {this.renderDescription(info)}
                    </View>
                    <View style={styles.block}>

                        <Text style={{fontSize: 20, color: "#CC1A17"}}>Localização</Text>
                        <Divider style={{backgroundColor: '#000', marginBottom: 10}}/>

                    </View>
                </ScrollView>
                <Divider style={{backgroundColor: 'black'}}/>
               
            </View>

        )
    }

}

const styles = StyleSheet.create({

    block:{
        marginTop:15,

        backgroundColor:'white',
        padding:20
    },
    AttendeeContainer: {
        flexDirection: 'row',
        height: 55,
        justifyContent: 'center',
        marginLeft: 10,
        marginRight: 10,
    },

    centerRow: {
        alignItems: 'center',
        backgroundColor: 'transparent',
        flex: 3,
        flexDirection: 'column',
        justifyContent: 'center',
    },

    leftRow: {
        backgroundColor: 'transparent',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignSelf: 'center',
    },
    rightRow: {
        alignItems: 'flex-end',
        backgroundColor: 'transparent',
        flex: 2,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        marginRight: 4,
        alignSelf: 'center'
    },

    icon: {
        justifyContent: 'flex-start',
        marginTop: 2.8,
    },

    nameAttendee: {
        alignSelf: 'center',
        fontSize: 20,
        fontWeight: '400',
        color: '#000',
        marginBottom: 10,
    },

    details: {
        marginTop: 20,
        flex: 1,
        alignSelf: 'center',
    },

    infoRow: {
        margin: 25,
    },

    ramoText: {
        alignSelf: 'flex-start',
        marginBottom: 5,
        color: 'white',
        fontSize: 17,
        fontWeight: '400',
    },

    timeText: {
        alignItems: 'flex-end',
        flex: 2,
        lineHeight: 10,
        marginRight: 4,
    },

    mainViewStyle: {
        flex: 1,
        flexGrow: 1,
        flexDirection: 'column',
    },

    scroll: {
        backgroundColor: '#eee',
        flex: 1,
        //marginBottom: 55,
    },

    header:{
        flex: 1,
        padding: 10,
        backgroundColor: 'white',
        borderRadius: 0,
        
    },
    cardContainer: {
        flex: 1,
        padding: 10,
       //    margin: 20,
        backgroundColor: 'white',
        borderRadius: 5,
    },

    headerContainer: {
        flex: 1,
    },

    container: {
        flex: 1,
        flexDirection: 'column',
    },
    coverContainer: {
        position: 'relative',
    },
    coverImage: {
        height: Dimensions.get('window').width * (2 / 4),
        width: Dimensions.get('window').width,
    },
    /*headerContainer: {
        alignItems: 'center',
        backgroundColor: '#FFF',
    },*/


    carreerPathContainer: {
        backgroundColor: '#CC1A17',
        height: 50,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: 15,
    },
    carreerPathText: {

        height: 50,
        color: 'white',
        fontWeight: 'bold',
        fontSize: 20,

    },
    companyHeader: {
        backgroundColor: '#dddddd',
        // height:150,
        borderRadius: 5,
        margin: 10,
        padding: 10


    },
    companyTitle: {
        paddingBottom: 5,
        fontWeight: 'bold',
        color: '#777777',
        fontSize: 17,

        // padding:20
    },
    companyLogo: {
        borderRadius: 20,

    },

    wrapper: {},
    company: {
        flex: 1,
        flexDirection: 'row',
        // backgroundColor:'red',
        color: 'black'
    },

    companyLogoContainer: {
        flex: 1,
        justifyContent: 'center',
        width: '60%',
        // backgroundColor:'white',
        margin: 20,


    },
    aboutCompany: {
        width: SCREEN_WIDTH,
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }


});


function mapStateToProps(state, props) {

    return {

        token: state.apiReducer.token,
        user: state.apiReducer.user,
        logged: state.apiReducer.logged,
        events: state.apiReducer.events,
        careerPath: state.apiReducer.careerPath,

    }
}

function mapDispatchToProps(dispatch) {

    return bindActionCreators(Actions, dispatch);
}

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