import React, { Component } from 'react';
import {
  StyleSheet,
  Image,
} from 'react-native';

import ScrollableContainer from '../components/scrollableContainer'
import ClearText from '../components/text'

export default class Information extends Component {
  constructor(props) {
    super()
  }
  render() {
    const content = this.props.content
    return (
      <ScrollableContainer heading="ABOUT THIS WORK" bodyStyle={styles.bodyStyle}>
        <ClearText style={styles.body}>
          {this.props.content.show}
        </ClearText>

        <Image source={require('../../img/aiweiwei.png')} resizeMode='cover' style={styles.face} />
        <ClearText style={styles.body}>
          {this.props.content.aiWeiWeiBio}
        </ClearText>
        <Image source={require('../../img/herzogDeMeuron.png')} resizeMode='cover' style={styles.face} />
        <ClearText style={styles.body}>
          {this.props.content.herzogBio}
        </ClearText>
        <ClearText style={styles.body}>
          {this.props.content.deMeuronBio}
        </ClearText>
        <ClearText style={styles.footer}>
        </ClearText>
      </ScrollableContainer>
    );
  }
}

/*
        <YouTube
         ref={(ref) => this.youtubePlayer = ref}
         videoId={content.video.token}
         play={false}
         hidden={false}
         fullscreen={false}
         loop={true}
         controls={1}
         showFullscreenButton={true}
         showinfo={false}
         modestbranding={true}
         rel={false}
         iv_load_policy={3}

         onReady={(e)=>{this.setState({isReady: true})}}
         onChangeState={(e)=>{
           if (e.state == 'playing') {
             this.props.onVideoPlay()
           }
           else {
             this.props.onVideoPause()
           }
         }}
         onChangeFullscreen={(e)=>{
           if (e.isFullscreen) {
             this.props.onVideoPlay()
           }
           else {
             this.props.onVideoPause()
           }
         }}
         onError={(e)=>{this.setState({error: e.error})}}
         onProgress={(e)=>{this.setState({currentTime: e.currentTime, duration: Math.round(e.duration)})}}

         style={styles.video}
        />
*/

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
  },
  bodyStyle: {
    marginRight: 10,
  },
  video: {
    alignSelf: 'stretch',
    height: 400,
    width: '100%',
    backgroundColor: 'black',
    marginVertical: 10
  },
  body: {
    textAlign: 'left',
    paddingRight: 10,
    width: '90%',
    marginBottom: 20,
    maxWidth: 600,
  },
  hero: {
    width: '90%',
    height: 300,
  },
  face: {
    width: '90vw',
    height: 400,
    marginBottom: 20,
  },
  footer: {
    marginBottom: 80,
  },
})