import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Tabs, Tab,
} from 'material-ui';
import {LINKS} from "../../routes";
import '../Inbox/style.scss';
import Categories from '../Categories';
import StoreList from '../StoreList';
import Tags from '../Tags';

export const TABS_LIST = {
  CATEGORIES: 'categories',
  STORES: 'stores',
  TAGS : 'tags'
};

@inject('appstate')
@observer
export default class DataTabComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.taskStore = props.appstate.task;
    this.state = {
      tabSelected: TABS_LIST.STORES,
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;
  }

  componentDidMount() {
    let activeTab = (this.globalUI.dataTabSelected ? this.globalUI.dataTabSelected : TABS_LIST.STORES);
    this.setState({
      tabSelected : activeTab
    });
    this.props.history.push(LINKS.DATA +`/${activeTab}`)
  }

  handleChange = (tabSelected) => {
    this.setState({
      tabSelected: tabSelected,
    });
    this.globalUI.dataTabSelected = tabSelected;
    this.props.history.push(LINKS.DATA+'/'+tabSelected);
  };

  getContent() {
    switch (this.state.tabSelected) {
      case TABS_LIST.STORES:
        return  <StoreList/>
      case TABS_LIST.CATEGORIES:
        return <Categories/>
      case TABS_LIST.TAGS:
        return <Tags/>
      default:
        return  <StoreList/>
    }
  }

  render() {

    return (
      <div className="inbox containerMiddle">
        <div className="row no-margin">
          <div className="col l12 m12 s12">
            <Tabs
              value={this.state.tabSelected}
              onChange={this.handleChange}
              inkBarStyle={{background: 'transparent'}}
              className="tabsAkun"
              style={{background: 'transparent'}}
            >
              <Tab label="Stores" value="stores"
                   className={(this.state.tabSelected === 'stores') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              </Tab>
              <Tab label="Categories" value="categories"
                   className={(this.state.tabSelected === 'categories') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              </Tab>
              <Tab label="Tags" value="tags"
                   className={(this.state.tabSelected === 'tags') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              </Tab>

            </Tabs>

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