import React from 'react';
import {observer, inject} from 'mobx-react';
import {FlatButton, Tab, Tabs} from "material-ui";
import GeneralInformation from "./GeneralInformation/index";
import CustomerOrder from "./Order/index";
import WalletCustomer from "./Wallet/index";
import {
  Card,
  Divider
} from 'material-ui';
import {Link} from 'react-router-dom';
import {LINKS} from "../../routes";
import './style.scss'
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';

@inject('appstate')
@observer
export default class CustomerDetail extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      tabSelected: 'gi',
    };
    this.defaultState = Object.assign({}, this.state);
    this.customer = props.appstate.customer;
  }

  componentDidMount() {
    console.log(this.props);
    this.customer.selectedCustomer = {
      id : this.props.match.params.id
    }
    this.customer.getDetail(this.props.match.params.id);
  }

  handleChange = (tabSelected) => {
    this.setState({
      tabSelected: tabSelected,
    });
    // this.props.history.push(tabSelected);
  };

  render() {
    return (
      <div className="customerDetail containerMiddle animated fadeIn">
          <div style={{marginBottom: '10px', marginLeft: '-15px'}}>
            <FlatButton
              className="headerMenu"
              hoverColor="#f1f5f9"
              style={{background: '#ffffff00'}}
              onClick={() => this.props.history.goBack()}
              label="Back"
              primary={true}
              icon={<NavigationArrowBack />}
            />
            {/*<h3 className="headerMenu"><Link to={LINKS.CUSTOMER}>Customers</Link></h3>*/}
          </div>

        <Divider style={{marginBottom: 20, marginTop: 15}} />
        <div className="row">
          <Tabs
            value={this.state.tabSelected}
            onChange={this.handleChange}
            inkBarStyle={{background: 'transparent'}}
            className="tabsAkun"
            style={{background: '#ffffff00'}}>
            <Tab
              label="General"
              value="gi"
              className={(this.state.tabSelected === 'gi') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              {this.state.tabSelected === 'gi' && <GeneralInformation/>}
            </Tab>
            <Tab label="Order" value="order"
                 className={(this.state.tabSelected === 'order') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              {(this.state.tabSelected === 'order' && <CustomerOrder history={this.props.history}/>)}
            </Tab>
            <Tab label="Wallet" value="wallet"
                 className={(this.state.tabSelected === 'wallet') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              {(this.state.tabSelected === 'wallet') && <WalletCustomer/>}
            </Tab>
          </Tabs>
        </div>
      </div>
    )
  }
}
