/** Footer for showing main options **/
import _ from 'lodash';
import React, { Component } from 'react';
import { Dimensions, Image, Text, View } from 'react-native';
import { NavigationActions } from 'react-navigation';
import { Icon } from 'react-native-elements';
import ModalDropdown from 'react-native-modal-dropdown';
import { connect } from 'react-redux';
import colors from '../../config/colors.json';
import { profileFetch } from '../../actions';

const GREEN_CHECK_IMAGE = require('../../../assets/GreenCheck.png');

const SCREEN_WIDTH = Dimensions.get('window').width;
let profileNames = [];

class Footer extends Component {
  /**
  * Component Will Mount
  **/
  componentWillMount() {
    this.props.profileFetch();
  }

  /**
  * Component Will Receive Props
  **/
  componentWillReceiveProps(nextProps) {
    if (nextProps.profiles) {
      profileNames = [];
      for (let i = 0; i < this.props.profiles.length; i++) {
        profileNames.push(this.props.profiles[i].profileName);
      }
    }
  }

  /**
  * Sets the color of the icon based on whether it was selected or not
  **/
  getColor(index) {
    return index === this.props.index ? colors.buttonBlue : colors.middleGrey;
  }

  /**
  * Navigates to the events page if not on that page
  **/
  processEventPress() {
    if (this.props.index === 0) {
      return;
    }
    this.props.navigation.navigate('eventHomeScreen');
  }

  /**
  * Navigates to the contacts page if not on that page
  **/
  processContactsPress() {
    if (this.props.index === 1) {
      return;
    }
    this.props.navigation.navigate('contactTabs');
  }
  /**
  * Navigates to the profile share page if not on that page
  **/
  processProfileSharePress() {
    if (this.props.index === 2) {
      return;
    }
    this.props.navigation.navigate('profileShareOptionsScreen');
  }

  /**
  * Navigates to the conversation list page if not on that page
  **/
  processConversationPress() {
    if (this.props.index === 3) {
      return;
    }
    this.props.navigation.navigate('conversationList');
  }

  /**
  * Navigates to the profile home screen for the given profile
  **/
  processProfileSelection(idx) {
    const resetAction = NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({ routeName: 'mainOptionsMenu', params: { profileIndex: idx, profileName: this.props.profiles[idx].profileName } })
      ]
    });

    this.props.navigation.dispatch(resetAction);
  }

  /**
  * Adds an icon on the right of the profile row if it is the selected profile
  **/
  renderHightlightedIcon(highlighted) {
    if (highlighted) {
      return (
        <Image
          style={styles.dropdownImageStyle}
          mode='stretch'
          source={GREEN_CHECK_IMAGE}
        />
      );
    }

    return (
      <Image
        style={styles.dropdownImageStyle}
        mode='stretch'
      />
    );
  }

  /**
  * Adds an icon to the left of the profile name in the profile row
  **/
  renderLeftIcon(rowID) {
    const base64 = this.props.profiles[rowID].profileAvatarImg;

    if (base64) {
      return (
        <View style={styles.leftIconStyle}>
          <Image
            source={{ uri: base64 }}
            style={styles.avatarSmallImageStyle}
          />
          <Text style={[styles.modalDropdownDropdownTextStyle, { color: this.props.profiles[rowID].isDisabled ? colors.lightGrey : colors.black }]}>
            {profileNames[rowID]}
          </Text>
        </View>
      );
    }

    return (
      <View style={styles.leftIconStyle}>
        <Icon
          name={'account-circle'}
          size={20}
          color={colors.middleGrey}
          containerStyle={styles.editIconWithAvatar}
        />
        <Text style={[styles.modalDropdownDropdownTextStyle, { color: this.props.profiles[rowID].isDisabled ? colors.lightGrey : colors.black }]}>
          {profileNames[rowID]}
        </Text>
      </View>
    );
  }

  /**
  * Used for custom styling of the modal dropdown
  **/
  renderModalDropdownRow(rowData, rowID, highlighted) {
    return (
      <View style={{ backgroundColor: this.props.profiles[rowID].isDisabled ? colors.offWhite : colors.white }}>
        <View style={styles.modalDropdownDropdownViewStyle}>
          {this.renderLeftIcon(rowID)}

          {this.renderHightlightedIcon(highlighted)}
        </View>
      </View>
    );
  }

  /**
  * Renders the last icon or the avatar
  **/
  renderFinalIcon() {
    const profileIndex = parseInt(this.props.profileIndex, 10);

    const base64 = this.props.profileAvatarImg;

    if (base64) {
      return (
        <ModalDropdown
          style={styles.modalDropdownStyle}
          dropdownStyle={styles.modalDropdownDropdownStyle}
          options={profileNames}
          renderRow={this.renderModalDropdownRow.bind(this)}
          onSelect={(idx) => this.processProfileSelection(idx)}
          defaultIndex={profileIndex}
        >
          <Image
            source={{ uri: base64 }}
            style={styles.avatarImageStyle}
          />
        </ModalDropdown>
      );
    }
    return (
      <ModalDropdown
        style={styles.modalDropdownStyle}
        dropdownStyle={styles.modalDropdownDropdownStyle}
        options={profileNames}
        renderRow={this.renderModalDropdownRow.bind(this)}
        onSelect={(idx) => this.processProfileSelection(idx)}
        defaultIndex={profileIndex}
      >
        <Icon
          name={'account-circle'}
          size={40}
          color={this.getColor(4)}
          containerStyle={styles.editIconWithAvatar}
        />
      </ModalDropdown>
    );
  }

  /**
  * Render Method
  **/
  render() {
    return (
      <View style={styles.mainViewStyle}>
        <Icon
          name={'event'}
          size={30}
          color={this.getColor(0)}
          containerStyle={styles.editIconWithAvatar}
          onPress={() => this.processEventPress()}
        />
        <Icon
          name={'group'}
          size={30}
          color={this.getColor(1)}
          containerStyle={styles.editIconWithAvatar}
          onPress={() => this.processContactsPress()}
        />
        <Icon
          reverse
          name={'handshake-o'}
          type='font-awesome'
          size={20}
          color={this.getColor(2)}
          containerStyle={styles.editIconWithAvatar}
          onPress={() => this.processProfileSharePress()}
        />
        <Icon
          name={'comment'}
          size={30}
          color={this.getColor(3)}
          containerStyle={styles.editIconWithAvatar}
          onPress={() => this.processConversationPress()}
        />
        {this.renderFinalIcon()}
      </View>
    );
  }
}

const styles = {
  mainViewStyle: {
    backgroundColor: colors.white,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    borderTopColor: colors.middleGrey,
    borderTopWidth: 1
  },
  modalDropdownStyle: {
    alignSelf: 'center'
  },
  modalDropdownDropdownViewStyle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 40,
    marginLeft: 10
  },
  leftIconStyle: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  modalDropdownDropdownStyle: {
    width: SCREEN_WIDTH,
    borderColor: colors.lightGrey,
    borderWidth: 1,
    marginRight: -10
  },
  modalDropdownDropdownTextStyle: {
    fontSize: 18,
    marginLeft: 10
  },
  dropdownImageStyle: {
    width: 30,
    height: 30,
    borderRadius: 15,
    marginRight: 10
  },
  avatarImageStyle: {
    width: 35,
    height: 35,
    borderWidth: 1,
    borderRadius: 18
  },
  avatarSmallImageStyle: {
    width: 30,
    height: 30,
    borderWidth: 1,
    borderRadius: 15
  }
};

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

  return { profiles };
};

export default connect(mapStateToProps, { profileFetch })(Footer);
