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 ContentManagement from '../ContentManager';

export const TABS_LIST = {
  POSTS: 'posts',
  TAGS: 'tags',
};

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

  componentDidMount() {
    // this.props.history.push(LINKS.INBOX +`/${this.messageStore.selectedTab}`)
    let activeTab = (this.globalUI.contentTabSelected ? this.globalUI.contentTabSelected : TABS_LIST.POSTS);
    this.setState({
      tabSelected : activeTab
    });
    this.props.history.push(LINKS.CONTENT +`/${activeTab}`)
  }

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

  getContent() {
    switch (this.state.tabSelected) {
      case TABS_LIST.POSTS:
        return  <ContentManagement history={this.props.history}/>
      case TABS_LIST.TAGS:
        return <div>2</div>
      default:
        return  <div>3</div>
    }
  }

  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="Posts" value="posts"
                   className={(this.state.tabSelected === 'posts') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              </Tab>
              {/*<Tab label="Tags" value="tags"*/}
                   {/*className={(this.state.tabSelected === 'tags') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>*/}
              {/*</Tab>*/}

            </Tabs>

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