/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, {Component, Children} from 'react';
import {Modal, StyleSheet, Text, View,Image,TouchableOpacity,TouchableHighlight} from 'react-native';
import ModalContent from './ModalContent'

export default class Header extends Component {

    state = {
        modalVisible: false
      };
    
      setModalVisible(visible) {
        this.setState({ modalVisible: visible });
      }
    
      renderTitle(){
        let {children,title} =  this.props
        if(title){
          title = <Text style={styles.headerLeftText} numberOfLines={1}>{title}</Text>
        }
        return title?title:children
      }

  render() {
    return (
      <View style={{height:50}}>
        <View style={styles.headerContainer}>
          <View style={styles.headerLeft}>
            {this.renderTitle()}
            {/* <Text style={styles.headerLeftText} onPress={()=>{this.props.leftEvent()}}>{this.props.title}</Text> */}
          </View>
          <View style={styles.headerRight}>
            <TouchableOpacity style={styles.clickButton,styles.leftButton} onPress={() => {
                this.refs.dialog._setModalVisible(true);
            }}>
              <Image style={styles.img} source={require('../static/img/point.png')}/>
            </TouchableOpacity>
            <TouchableOpacity style={styles.clickButton,styles.rightButton}>
              <Image style={styles.img} source={require('../static/img/circle.png')}/>
            </TouchableOpacity>
          </View>
        </View>
        <ModalContent
          ref="dialog"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  headerContainer:{
    flex: 1,
    flexDirection:'row',
    justifyContent: 'space-between',
    backgroundColor:'#ddd',
    padding:7.5
  },
  headerLeft:{
    
  },
  headerLeftText:{
    lineHeight:35,
    fontSize:15,
    color:'#000'
  },
  headerRight:{
    flex:1,flexDirection:'row',justifyContent: 'flex-end'
  },
  leftButton:{
    borderTopLeftRadius:35,borderBottomLeftRadius:35,borderColor:'#fff',
    backgroundColor:'#fff',borderLeftWidth:15,borderRightWidth:10,height:35,
  },
  rightButton:{
    borderTopRightRadius:35,borderBottomRightRadius:35,borderColor:'#fff',
    backgroundColor:'#fff',borderLeftWidth:10,borderRightWidth:15,height:35,
  },
  img:{
    height: 25, 
    width: 25, 
    alignItems: 'center',
    marginTop:5
  }
});