import React, { Component } from 'react';
import { View, TouchableOpacity, DeviceEventEmitter } from 'react-native';
import styles from './art-detail.style';
import { Container, Header, Content, Card, CardItem, Text, Body, Grid, Row, Col } from 'native-base'
import CircleCanvas from '../../components/circle-canvas';
import AudioPlayer from '../../components/audio-player';
import BookIcon from '../../components/icons/book';
import { inject, observer } from 'mobx-react/native';
import { observable } from 'mobx';
import i18n from '../../i18n';

@inject('explore') @observer
class MediaBar extends Component {

  constructor(props) {
    super(props);


  }

  ReadButton() {

    return(
      <View>
        <CircleCanvas>
          <View style={styles.readWrap}>

            <BookIcon width={55}/>
          </View>
        </CircleCanvas>
        <View style={styles.readBottom}>

          <Text style={styles.readLabel}>
            {i18n.key("buttons.read")}
          </Text>
        </View>
      </View>
    );
  }


  render = () => {
    const ReadButton = this.ReadButton();
    return (

      <Row style={styles.MediaBar} >

        <AudioPlayer url="https://s3-ap-southeast-1.amazonaws.com/national-gallery-asset-batch/audiostest/5083/SG_Lotus_in_a_Breeze_ENG_20151007160735.mp3" />
        <View style={styles.separator} />
        {ReadButton}

      </Row >

    );
  }

  // componentWillMount() {}
  // componentWillReceiveProps(){}
  // shouldComponentUpdate(){}
  // componentWillUpdate(){}
  // componentDidUpdate(){}
  // componentWillUnmount(){}

}
export default MediaBar;