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 Delivery from './Delivery';
import Penalty from './Penalty';
import Performance from './Performance';
import ProfileComponent from './Profile';
import Rating from './Rating';
import ItemAll from '../Items/All/';
import SettingStore from './Setting';
export const STORES_TABS = {
  PROFILE: 'store profile',
  // DELIVERY: 'delivery',
  ADDRESS: 'address',
  // RATING: 'rating',
  // PERFORMANCE: 'store_performance',
  // PENALTY: 'penalty_point',
  BANK: 'bank_account',
  ITEM : 'item',
  SETTING : 'setting'
};

@inject('appstate')
@observer
export default class StoreComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.taskStore = props.appstate.task;
    this.state = {
      tabSelected: STORES_TABS.PROFILE
    };
    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.userStores = props.appstate.stores;
    this.userData = props.appstate.userData;
  }

  componentDidMount() {
    if(this.userData.role == 'store'){
      const {match: {params: {tab: tabSelected}}} = this.props;
      console.log(this.props);
      if (!tabSelected) {
        this.props.history.push(LINKS.STORES + "/profile");
        this.userStores.changeTab('profile');
      } else {
        this.handleChange(tabSelected);
      }
    }
  }

  handleChange = (tabSelected) => {
    this.setState({tab: tabSelected});
    this.userStores.changeTab(tabSelected);
    if(this.userData.role == 'store') {
      this.props.history.push(LINKS.STORES + '/' + tabSelected);
    }
  };

  getContent() {
    switch (this.userStores.selectedTab) {
      case STORES_TABS.PROFILE:
        return <ProfileComponent id={this.props.id}/>;
      case STORES_TABS.ADDRESS:
        return <Address id={this.props.id}/>;
      case STORES_TABS.BANK:
        return <Bank id={this.props.id}/>;
      case STORES_TABS.DELIVERY:
        return <Delivery id={this.props.id}/>;
      case STORES_TABS.PENALTY:
        return <Penalty id={this.props.id}/>;
      case STORES_TABS.RATING:
        return <Rating id={this.props.id}/>;
      case STORES_TABS.PERFORMANCE:
        return <Performance id={this.props.id}/>;
      case STORES_TABS.ITEM:
        return <ItemAll id={this.props.id}/>;
      case STORES_TABS.SETTING:
        return <SettingStore id={this.props.id}/>;
      default:
        return <ProfileComponent id={this.props.id}/>
    }
  }

  filterMenu = (it)=>{
    if(this.userData.role == 'store'){
      return (it !== 'ITEM' && it !== 'SETTING')
    }
    if(this.userData.role == 'administrator'){
      return it
    }
  };

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

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

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