import React, { Component } from 'react';
import { Text, ScrollView, View, Image } from 'react-native';
import { connect } from 'react-redux';
import { profFetch } from '../actions/';
import { Card, CardSection, Button } from '../components/common';

class Clase extends Component  {

	componentWillMount() {
    console.log("profProps", this.props);
    this.props.profFetch({id:this.props.id});
	}

	render() {
    console.log("ProfRender", this.props);
		const { profesor } = this.props;
		const image = `https://plataforma.especificosba.com.ar${profesor.imagen}`;
		console.log(image);
		return (
			<ScrollView>
	      <Card>
					<CardSection>
						<Text style={{textAlign:'center',fontSize:18,flex:1,fontWeight:'700'}}>
							{profesor.nombre} {profesor.apellido}
						</Text>
					</CardSection>
					<CardSection>
						<Image source={{uri:image}}
							resizeMode="contain"
							style={{height:250,flex:1}}
						/>
					</CardSection>
					<CardSection>
						<Text>E-mail: {profesor.email}</Text>
					</CardSection>
					<CardSection>
						<Text>Web: {profesor.web}</Text>
					</CardSection>
					<CardSection>
						<Text>{profesor.intro}</Text>
					</CardSection>
	      </Card>
			</ScrollView>
		);
	}
};

const mapStateToProps = state => {
  console.log("ProfState:", state);
	return { profesor: state.ProfReducer.profesor };
};

export default connect(mapStateToProps, { profFetch })(Clase);