import React, { Component, PropTypes } from 'react';
import { Avatar, List, ListItem, RaisedButton, Tab, Tabs } from 'material-ui';
import AccountCircleIcon from 'material-ui/svg-icons/action/account-circle';
import HomeIcon from 'material-ui/svg-icons/action/home';
import MailOutlineIcon from 'material-ui/svg-icons/communication/mail-outline';
import PhoneIcon from 'material-ui/svg-icons/communication/phone';
import SmartPhoneIcon from 'material-ui/svg-icons/hardware/smartphone';
import LocationOnIcon from 'material-ui/svg-icons/communication/location-on';
import PermIdentityIcon from 'material-ui/svg-icons/action/perm-identity';

import { grey500 } from 'material-ui/styles/colors';
import Spacing from 'material-ui/styles/spacing';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import UCdefaultTheme from '../../themes/DefaultTheme';

import './Profile.css';


export default class Profile extends Component {

  constructor() {
    super();

    this.renderAboutMe = this.renderAboutMe.bind(this);
    this.renderAddress = this.renderAddress.bind(this);
    this.renderUpdateProfileButton = this.renderUpdateProfileButton.bind(this);
    this.renderPrivacySettingsButton = this.renderPrivacySettingsButton.bind(this);
  }

  getChildContext() {
    const theme = getMuiTheme(UCdefaultTheme);
    theme.appBar.textColor = 'black';
    theme.appBar.spacing = Spacing.desktopSubheaderHeight;
    return {
      muiTheme: theme,
    };
  }

  renderAboutMe() {
    return (
      <div>
        <div className="brandbar-profile-header">
          <div className="brandbar-profile-header-content">
            <Avatar size={115} src={this.props.profileData.picture} />
            <p>{this.props.profileData.fullName}</p>
            <p>{this.props.profileData.mNumber}</p>
          </div>
        </div>

        <div className="brandbar-profile-description">
          <Tabs tabItemContainerStyle={{ backgroundColor: 'white' }}>
            <Tab icon={<AccountCircleIcon className="tabIcon" />}>
              <List className="account">
                <ListItem
                  leftIcon={<MailOutlineIcon color={grey500} />}
                  primaryText={this.props.profileData.email}
                  secondaryText={this.props.profileData.emailType}
                  disabled
                />
                <ListItem
                  leftIcon={<PermIdentityIcon color={grey500} />}
                  primaryText={this.props.profileData.sixPlusTwo}
                  secondaryText="Username"
                  disabled
                />
                <ListItem
                  leftIcon={<PhoneIcon color={grey500} />}
                  primaryText={this.props.profileData.homePhone}
                  secondaryText="Home"
                  disabled
                />
                <ListItem
                  leftIcon={<SmartPhoneIcon color={grey500} />}
                  primaryText={this.props.profileData.cellPhone}
                  secondaryText="Cell"
                  disabled
                />
              </List>
            </Tab>
            <Tab icon={<HomeIcon className="tabIcon" />}>
              {this.renderAddress()}
            </Tab>
          </Tabs>
          <div>
            {this.renderUpdateProfileButton()}
            {this.renderPrivacySettingsButton()}
          </div>
        </div>
      </div>
    );
  }

  renderAddress() {
    const currentAddress = this.props.profileData.currentAddress;
    const permanentAddress = this.props.profileData.permanentAddress;

    const currAddress = currentAddress ? (<span>{currentAddress.address1}, {currentAddress.city}, {currentAddress.state} {currentAddress.postal}</span>) : (<span></span>);
    const permAddress = permanentAddress ? (<span>{permanentAddress.address1}, {permanentAddress.city}, {permanentAddress.state} {permanentAddress.postal}</span>) : (<span></span>);

    return (
      <List>
        <ListItem
          leftIcon={<LocationOnIcon color={grey500} />}
          primaryText={currAddress}
          secondaryText="Current Address"
          disabled
        />
        <ListItem
          leftIcon={<LocationOnIcon color={grey500} />}
          primaryText={permAddress}
          secondaryText="Permanent Address"
          insetChildren
          disabled
        />
      </List>
    );
  }

  /**
   * if updateProfileLink prop has a value we render the button
   * @return {function} button jsx
   */
  renderUpdateProfileButton() {
    if (!this.props.updateProfileUrl) {
      return null;
    }

    return (
      <div style={{ padding: '5px' }}>
        <RaisedButton
          href={this.props.updateProfileUrl}
          className="brandbar-profile-button"
          fullWidth
          label="Update Profile"
        />
      </div>
    );
  }

  /**
   * if privacySettingsLink prop has a value we render the button
   * @return {function} button jsx
   */
  renderPrivacySettingsButton() {
    if (!this.props.privacySettingsUrl) {
      return null;
    }

    return (
      <div style={{ padding: '5px' }}>
        <RaisedButton
          href={this.props.privacySettingsUrl}
          className="brandbar-profile-button"
          fullWidth
          label="Privacy Settings"
        />
      </div>
    );
  }

  renderSecurity() {
    return (
      <div className="brandbar-security">
        <div className="brandbar-security-title">
          Security
        </div>
        <div className="brandbar-security-lastlogin">
          Last Login:
          June 11, 2015, 8:03 pm
        </div>
        <div className="brandbar-security-location">
          Location IP:
          123.123.12.12
        </div>

        <div className="brandbar-security-updatepwd">
          Your Password expires in
          <b>
            12
          </b>
          days. Please update your password
        </div>
      </div>
    );
  }
  renderStatusText() {
    return (
      <div className="ih-brandbar-statusText">

      </div>
    );
  }

  render() {
    return (
      <div className="brandbar-profile pthnavflyoutopen flyoutprofile">
        <div style={{ fontSize: '14px' }}>
          <div>
            {this.renderAboutMe()}
            {this.renderStatusText()}
          </div>
        </div>
      </div>
    );
  }
}

Profile.propTypes = {
  profileData: PropTypes.object,
  updateProfileUrl: PropTypes.string,
  privacySettingsUrl: PropTypes.string,
};

Profile.childContextTypes = {
  muiTheme: PropTypes.object,
};