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

import HTMLView from 'react-native-htmlview'
import Modal from '../components/modal'

import htmlStyles from '../components/htmlStyles'

import ScrollableContainer from '../components/scrollableContainer'
import ClearText from '../components/text'
import Button from '../components/button'
import Close from '../components/close'
import Heading from '../components/heading'
import Touchable from '../components/touchable'

export default class Information extends Component {
  constructor(props) {
    super()
    this.state = {
      essay: { title: '', byline: '', body: '' },
      essayBody: '',
      essayModalVisible: false,
      biosVisible: false,
    }
  }
  showEssay(essay) {
    let essayBody = essay.body.split('\n').map( (s) => {
      s = s.replace(/\r/g,'').trim()
      if (! s.length) return ''
      if (s.match(/^<h2>/i)) return s.toUpperCase()
      return '<p>' + s + '</p>'
    }).join('')
    if (essay.id == 'notes-on-surveillance') {
      essayBody += '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n'
    }
    else {
      essayBody += '\n\n\n\n\n'
    }
    this.setState({ essay: { title: '', byline: '', body: '' }, essayBody: '', essayModalVisible: true })
    setTimeout( () => {
      this.setState({ essay, essayBody })
    }, 100)
  }
  hideEssay() {
    this.setState({ essayModalVisible: false })
  }
  showBios() {
    this.setState({ biosVisible: true })
  }
  hideBios() {
    this.setState({ biosVisible: false })
  }
  render() {
    const content = this.props.content
    const essays = this.props.essays.sort( (a,b) => {
      return a.__index < b.__index ? -1 : a.__index === b.__index ? 0 : 1
    }).filter( (essay) => {
      return ! essay.disabled
    }).map( (essay, i) => {
      return (
        <Touchable key={i} onPress={() => this.showEssay(essay)}>
          <View style={styles.essayContainer}>
            <ClearText style={styles.essayTitle}>{essay.title}</ClearText>
            <ClearText style={styles.essayByline}>{essay.byline}</ClearText>
          </View>
        </Touchable>
      )
    })
    return (
      <View>
        <ScrollableContainer heading="ABOUT THIS WORK" bodyStyle={styles.bodyStyle}>
          <View style={styles.essays}>
            {essays}

            <Touchable onPress={() => this.showBios()}>
              <View style={styles.essayContainer}>
                <ClearText style={styles.essayTitle}>Artist Biographies</ClearText>
                <ClearText style={styles.essayByline}>Ai Weiwei, Jacques Herzog, Phillipe de Meuron</ClearText>
              </View>
            </Touchable>
          </View>
        </ScrollableContainer>

        <Modal style={styles.modal} isVisible={this.state.biosVisible}>
          <ScrollView ref={ (ref) => this.modalScroller = ref } contentContainerStyle={styles.modalContainer}>
            <View style={styles.modalBody}>

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

            </View>
          </ScrollView>
          <Close onPress={() => this.hideBios()} />
        </Modal>

        <Modal style={styles.modal} isVisible={this.state.essayModalVisible}>
          <ScrollView contentContainerStyle={styles.modalContainer}>
            <View style={styles.modalInner}>
              <View style={styles.modalBody}>
                <Heading style={styles.essayHeader}>{this.state.essay.title.toUpperCase()}</Heading>
                <Heading style={styles.essayBylineHeader}>{this.state.essay.byline}</Heading>
                <HTMLView value={this.state.essayBody} stylesheet={htmlStyles} onLinkPress={this.props.onLinkPress} />
              </View>
            </View>
          </ScrollView>
          <Close onPress={() => this.hideEssay()} />
        </Modal>
      </View>
    );
  }
}

const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
const isIpad = (navigator.userAgent.match(/iPad/i))
const isAndroid = (navigator.userAgent.match(/Android/i))
const isMobile = isIphone || isIpad || isAndroid
const isDesktop = ! isMobile

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
  },
  bodyStyle: {
  },
  video: {
    alignSelf: 'stretch',
    height: 400,
    width: '100%',
    backgroundColor: 'black',
    marginVertical: 10
  },
  body: {
    textAlign: 'left',
    paddingRight: 10,
    width: '90%',
    marginBottom: 20,
  },
  
  bio: {
    textAlign: 'left',
    paddingRight: 10,
    marginBottom: 20,
  },
  face: {
    width: 550,
    height: 350,
    marginBottom: 20,
  },
  footer: {
    marginBottom: 80,
  },
  
  essays: {
    marginBottom: isMobile ? 10 : 20,
  },
  essayContainer: {
    padding: isMobile ? 5 : 10,
    margin: 5,
  },
  essayTitle: {
    textDecorationLine: 'underline',
  },
  essayByline: {
    fontSize: 12,
    fontWeight: 'bold',
  },
  essayHeader: {
    paddingBottom: 0,
    marginBottom: 0,
  },
  essayBylineHeader: {
    fontSize: isMobile ? 13 : 16,
    fontWeight: 'bold',
    marginBottom: 0,
  },

  modal: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: 'rgb(0,0,0)',
    margin: 0,
    padding: 0,
  },
  modalContainer: {
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  modalInner: {
    width: '100vw',
    alignItems: 'center',
  },
  modalBody: {
    marginTop: 20,
    width: isMobile ? '95%' : '90%',
    maxWidth: 650,
    backgroundColor: 'black',
    padding: isMobile ? 10 : 40,
    marginBottom: 200,
  },

})



/*
        <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}
        />
*/