/** Screen for listing profiles **/
import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ListView } from 'react-native';
import { List, ListItem } from 'react-native-elements';
import { profileFetch, propertiesFetch, socialSendFriendRequest } from '../../actions';
import colors from '../../config/colors.json';
import { strings } from '../../locales/i18n';

class ProfileList extends Component {
  static navigationOptions = () => {
    return {
      title: strings('profile.list_title')
    };
  }

  /**
  * Component Will Mount
  **/
  componentWillMount() {
    this.props.profileFetch();
    this.props.propertiesFetch();
    this.createDataSource(this.props);
  }

  /**
  * Component Will Receive Props
  **/
  componentWillReceiveProps(nextProps) {
    if (nextProps.profiles) {
      this.createDataSource(nextProps);
    }
  }

  /**
  * When selected from the ProfileListScreen navigates to the edit screen
  * When called from the SocialAddFriendScreen the user chooses an profile to share
  * profileId - the profileId of the requested user
  * userId - the userId of the requested user
  **/
  onProfileSelect(rowData) {
    if (this.props.isProfileSelectModal) {
      const { tagferId, otherUserId, otherProfileId } = this.props;
      const myProfileId = rowData.uid;
      const socialAddDate = new Date().toString();

      this.props.socialSendFriendRequest({
        myProfileId,
        myTagferId: tagferId,
        otherUserId,
        otherTagferId: this.props.navigation.state.params.tagferId,
        otherProfileId,
        socialAddDate
      });
      this.props.closeModal();
      this.props.navigation.goBack();
    } else {
      this.props.navigation.navigate('profileEdit', rowData);
    }
  }

  /**
  * Creates a data source for each profile in the list
  **/
  createDataSource({ profiles }) {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.dataSource = ds.cloneWithRows(profiles);
  }
  /**
  * Renders each row of the list
  **/
  renderRow(rowData) {
    const title = `${rowData.profileName}`;
    const subTitle = `${rowData.titleAndCompany}`;
    if (rowData.profileAvatarImg) {
      return (
        <ListItem
          roundAvatar
          key={rowData.uid}
          title={title}
          subtitle={subTitle}
          avatar={{ uri: rowData.profileAvatarImg }}
          onPress={() => this.onProfileSelect(rowData)}
        />
      );
    }
    return (
      <ListItem
        roundAvatar
        key={rowData.uid}
        title={title}
        subtitle={subTitle}
        leftIcon={{ name: 'account-circle', size: 40, color: colors.lightGrey }}
        onPress={() => this.onProfileSelect(rowData)}
      />
    );
  }

  /**
  * Render method
  **/
  render() {
    return (
      <List>
        <ListView
          enableEmptySections
          dataSource={this.dataSource}
          renderRow={this.renderRow.bind(this)}
        />
      </List>
    );
  }
}

const mapStateToProps = state => {
  // converts Profile objects into profile arrays
  const profiles = _.map(state.profiles, (val, uid) => {
      return { ...val, uid };
  });

  const { tagferId } = state.properties;

  return { profiles, tagferId };
};

export default connect(mapStateToProps, {
  profileFetch, propertiesFetch, socialSendFriendRequest
})(ProfileList);
