content: /*
   *
   * FoodProfile
   *
   */
  
  import React from 'react';
  import { connect } from 'react-redux';
  import Helmet from 'react-helmet';
  import { createStructuredSelector } from 'reselect';
  import { loadProfile } from 'containers/App/actions';
  import { selectSuggestion, selectProfile, selectLoading, selectError } from 'containers/App/selectors';
  import { FormattedMessage } from 'react-intl';
  import { cyan500, blue900 } from 'material-ui/styles/colors';
  import Tabs from 'material-ui/Tabs/Tabs';
  import Tab from 'material-ui/Tabs/Tab';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import getMuiTheme from 'material-ui/styles/getMuiTheme';
  import LoadingIndicator from 'components/LoadingIndicator';
  import SwipeableViews from 'react-swipeable-views';
  import List from 'components/List';
  import ListItem from 'components/ListItem';
  import messages from './messages';
  import { getSummaryNutrients, getDetailedNutrients, defaultPortions } from 'lib/nutrientMap.js';
  import SummaryCard from 'components/SummaryCard';
  import DetailedCard from 'components/DetailedCard';
  import FoodProfileHeader from 'components/FoodProfileHeader';
  
  
  export class FoodProfile extends React.Component { // eslint-disable-line react/prefer-stateless-function
    constructor(props) {
      super(props);
      this.state = {
        index: 0,
        portion: null,
        portion_index: 0,
      };
      this.portions = null;
  
  
    }
    handleChangeTabs = (value) => {
      console.log("FoodProfile:tabchanged", value)
      this.setState({
        index: value,
      });
    };
    handlePortionChange = (event, index, value) => {
      console.log("FoodProfile:portionselected:handleChange:value", value)
      console.log("FoodProfile:portionselected:handleChange:value_g", this.portions[value].g)
      console.log("FoodProfile:portionselected:handleChange:index", index)
      this.setState({
        portion: this.portions[value].g,
        portion_index: index,
      });
  
    }
    handleChangeIndex = (index) => {
      this.setState({
        index,
      });
    };
  
  
  
    render() {
      const { index } = this.state;
      const muiTheme = getMuiTheme({
        tabs: {
              backgroundColor: '#3774a9',
            },
      });
      const inkBarStyle = {
        backgroundColor: 'gray',
      }
      let headerContent = null;
      let mainContent = null;
      console.log("FoodProfile:this.props.profile:",this.props.profile);
      if (this.props.loading) {
        mainContent = (<List component={LoadingIndicator} />)
      } else if (this.props.error !== false) {
        const ErrorComponent = () => (
          <ListItem item={'Something went wrong, please try again!'} />
        );
      } else if (this.props.profile !== false) {
        // mainContent = (<ProfileView profile={this.props.profile})
        var nutrients = this.props.profile.nutrients;
        if (this.props.profile['portions']) {
          this.portions = defaultPortions(this.props.profile.portions)
        } else {
          this.portions = defaultPortions()
        }
        var portion = null
  
        let headerInfo = {}
        console.log("FoodProfile:this.props.suggestion:",this.props.suggestion);
        console.log("FoodProfile:portions:",this.portions);
        headerInfo.name = this.props.profile.name
        headerInfo.group = this.props.profile.group
        headerInfo.source = this.props.suggestion.source
  
        headerContent = (
          <FoodProfileHeader
          headerInfo={headerInfo}
          portions={this.portions}
          onPortionChange={this.handlePortionChange}
          index={this.state.portion_index}
          />)
        // headerInfo.title = this.props.profile.
        const summaryTable = getSummaryNutrients(nutrients, this.state.portion);
        const detailedTable = getDetailedNutrients(nutrients, this.state.portion);
        mainContent = (
          <MuiThemeProvider muiTheme={muiTheme}>
            <div>
              <Tabs inkBarStyle={inkBarStyle} value={index} onChange={this.handleChangeTabs}>
                <Tab label="Summary" value={0} />
                <Tab label="Detailed" value={1} />
              </Tabs>
              <SwipeableViews index={index} onChangeIndex={this.handleChangeIndex}>
                <div>
                  <SummaryCard nutrientTable={summaryTable} />
                </div>
                <div>
                  <DetailedCard nutrientTable={detailedTable} />
                </div>
              </SwipeableViews>
            </div>
          </MuiThemeProvider>
        )
      }
      return (
  
        <div>
          {headerContent}
          {mainContent}
        </div>
      );
    }
  }
  
  const mapStateToProps = createStructuredSelector({
    profile: selectProfile(),
    loading: selectLoading(),
    error: selectError(),
    suggestion: selectSuggestion(),
  });
  
  function mapDispatchToProps(dispatch) {
    return {
      dispatch,
    };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(FoodProfile);
  