import React from 'react';
import {inject, observer} from 'mobx-react';
import {Link} from 'react-router';
import {LINKS} from '../../routes';
import {Tab, Tabs} from 'material-ui';
// import './style.scss';
import * as _ from 'lodash';

import Address from './Address';
import Bank from './Bank';
import GeneralInformation from './GeneralInformation';
import Password from './Password';

export const PROFILES_TABS = {
  GENERAL_INFORMATION: 'general_information',
  PASSWORD: 'password',
  // ADDRESS: 'address',
  // BANK: 'bank',
};

@inject('appstate')
@observer
export default class ProfileComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      tabSelected: PROFILES_TABS.GENERAL_INFORMATION
    };
    this.defaultState = Object.assign({}, this.state);
    this.handleChange = this.handleChange.bind(this);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;
    this.profileStore = props.appstate.profile;
  }

  componentDidMount() {
    const {match: {params: {tab: tabSelected}}} = this.props;
    console.log(this.props);
    if (!tabSelected) {
      this.props.history.push(LINKS.PROFILE + "/general_information");
      this.profileStore.changeTab('general_information');
    } else {
      this.handleChange(tabSelected);
    }
  }

  handleChange = (tabSelected) => {
    this.setState({tab: tabSelected});
    this.profileStore.changeTab(tabSelected);
    this.props.history.push(LINKS.GENERAL_INFORMATION + '/' + tabSelected);

    // this.setState({tabSelected: tabSelected});
    // this.globalUI.itemsTabSelected = tabSelected;
  };

  getContent() {
    switch (this.profileStore.selectedTab) {
      case PROFILES_TABS.GENERAL_INFORMATION:
        return <GeneralInformation/>;
      case PROFILES_TABS.ADDRESS:
        return <Address/>;
      case PROFILES_TABS.BANK:
        return <Bank/>;
      case PROFILES_TABS.PASSWORD:
        return <Password/>;
      default:
        return <GeneralInformation/>
    }
  }

  render() {

    return (
      <div className="store containerMiddle">
        <div className="row">
          <div className="col l12 m12 s12 no-padding">
            <Tabs
              value={this.profileStore.selectedTab}
              onChange={this.handleChange}
              inkBarStyle={{background: 'transparent'}}
              className="tabsAkun"
              style={{background: 'transparent'}}
            >

              {Object.keys(PROFILES_TABS).map(v => (
                <Tab
                  value={PROFILES_TABS[v]}
                  label={_.capitalize(v.split('_').join(' '))}
                  className={(this.profileStore.selectedTab === PROFILES_TABS[v]) ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}
                />
              ))}
              }
            </Tabs>

            {this.getContent()}
          </div>
        </div>
      </div>
    )
  }
}
