import React, { PropTypes, Component } from 'react';

import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  ListView,
  Image
} from 'react-native'

import { S5ProfilePicture } from 's5-components';

export default class ControlPanel extends Component {
  static propTypes = {
    closeDrawer: PropTypes.func.isRequired,
    users: PropTypes.any.isRequired
  };

  state = {
    users: this.props.users
  };

  constructor(props){
    super(props);
    this._openAddUserView = this._openAddUserView.bind(this);
    this._renderUsers = this._renderUsers.bind(this);
  }

  _openAddUserView() {
    this.props.closeDrawer({openSelectUserView:1});
  }

  componentWillReceiveProps (nextProps) {
    console.log( nextProps.users );
    // TODO : update control panel when update finished
  }

  _renderUsers(){
    var userList = this.state.users.map(function(user){
      return (
        <View key={user.username} style={styles.item}>
          <S5ProfilePicture
            name={user.nickName}
            profileFileUrl={user.profileFileUrl}
            size={40}
            style={styles.profileImage}
          />
          <Text style={styles.itemText}>
            {user.nickName}
          </Text>
        </View>
      );
    })

    return userList;
  }

  render() {
    let {closeDrawer} = this.props;

    return (
      <View style={styles.container}>
        <ScrollView >
          <View style={styles.header}>
            <Text style={styles.controlText}>User List</Text>
          </View>

          <View style={styles.itemList}>
            <TouchableOpacity onPress={this._openAddUserView}>
              <View style={styles.item}>
                <Image source={require('./img/ic_person_add.png')} style={styles.imageInvite}/>
                <Text style={[styles.itemText,{color:'#02a8f3'}]}>Invite follower</Text>                
              </View>
            </TouchableOpacity>
            {this._renderUsers()}
          </View>
        </ScrollView>
        <View style={styles.footer}>
          <TouchableOpacity onPress={closeDrawer}>
            <Image source={require('./img/ic_chevron_right.png')}/>
          </TouchableOpacity>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    borderLeftWidth: 1,
    borderLeftColor: 'black'
  },
  header: {
    padding: 20,
    backgroundColor: '#f8f8f8',
  },
  footer: {
    padding: 10,
    backgroundColor: '#f8f8f8',
  },
  controlText: {
    color: 'black',
  },
  button: {
    padding: 10,
    backgroundColor: 'white',
  },
  imageInvite: {
    margin:10,
    width:40,
    height:40,
    borderWidth: 1,
    borderRadius:20,
    borderColor:'#02a8f3'
  },
  profileImage: {
    margin:10,
    width:40,
    height:40
  },
  itemList: {
    paddingLeft: 10,
    paddingRight: 10,
    flex: 1
  },
  item: {
    flex: 1,
    flexDirection: 'row',
    height: 50,
  },
  itemText: {
    color: 'black',
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center'
  }
})

@@ -416,16 +416,117 @@
 ps.users
+,%0A    dataSource: new ListView.DataSource(%7B%0A      rowHasChanged: (row1, row2) =%3E row1 !== row2%0A    %7D)
 %0A  %7D;%0A%0A 
@@ -780,56 +780,187 @@
 nent
-WillReceiveProps (nextProps) %7B%0A    console.log( 
+DidMount()%7B%0A    this.setState(%7BdataSource:this.getDataSource(this.state.users)%7D); %0A  %7D%0A%0A  componentWillReceiveProps (nextProps) %7B%0A    this.setState(%7BdataSource:this.getDataSource(
 next
@@ -974,149 +974,156 @@
 sers
- 
+)%7D
 );%0A  
-  // TODO : update control panel when update finished%0A  %7D%0A%0A  _renderUsers()%7B%0A    var userList = this.state.users.map(function(user)%7B%0A  
+%7D%0A%0A  getDataSource(users: Array%3Cany%3E): ListView.DataSource %7B%0A    return this.state.dataSource.cloneWithRows(users);%0A  %7D%0A%0A  _renderRow(user)%7B%0A
     
@@ -1127,26 +1127,24 @@
    return (%0A
-  
       %3CView 
@@ -1192,18 +1192,16 @@
         
-  
 %3CS5Profi
@@ -1220,18 +1220,16 @@
         
- 
- 
 name=%7Bus
@@ -1233,34 +1233,32 @@
 %7Buser.nickName%7D%0A
-  
           profil
@@ -1288,18 +1288,16 @@
 ileUrl%7D%0A
-  
         
@@ -1318,18 +1318,16 @@
         
-  
 style=%7Bs
@@ -1346,18 +1346,16 @@
 eImage%7D%0A
-  
         
@@ -1357,34 +1357,32 @@
      /%3E%0A        
-  
 %3CText style=%7Bsty
@@ -1406,18 +1406,16 @@
         
-  
 %7Buser.ni
@@ -1434,18 +1434,16 @@
     
-  
 %3C/Text%3E%0A
     
@@ -1434,26 +1434,24 @@
     %3C/Text%3E%0A
-  
       %3C/View
@@ -1460,40 +1460,236 @@
     
-  
 );%0A  
-  %7D)%0A%0A    return userList
+%7D%0A%0A  _renderUsers()%7B%0A%0A    return (%0A      %3CListView%0A        ref=%22listView%22%0A        dataSource=%7Bthis.state.dataSource%7D%0A        removeClippedSubviews=%7Bfalse%7D%0A        renderRow=%7B (data) =%3E this._renderRow(data) %7D%0A      /%3E%0A    )
 ;%0A  

Update user list when user invited