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 FeaturedCat from '../FeaturedCategory';
import FeaturedStores from '../FeaturedStores';
import FeaturedItems from '../FeaturedItems';
import CustomMenu from '../CustomMenus';

export const TABS_LIST = {
  BANNER : 'banner',
  CUSTOM_MENU : 'menu',
  FEATURED_CATEGORIES: 'featured_categories',
  FEATURED_STORES: 'featured_stores',
};

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

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

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

  getContent() {
    switch (this.state.tabSelected) {
      case TABS_LIST.BANNER:
        return  <FeaturedItems/>
      case TABS_LIST.CUSTOM_MENU:
        return  <CustomMenu/>
      case TABS_LIST.FEATURED_STORES:
        return  <FeaturedStores/>
      case TABS_LIST.FEATURED_CATEGORIES:
        return <FeaturedCat/>
      default:
        return  <FeaturedItems/>
    }
  }

  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="Banner" value="banner"
                   className={(this.state.tabSelected === 'banner') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              </Tab>
              <Tab label="Menu" value="menu"
                   className={(this.state.tabSelected === 'menu') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              </Tab>
              <Tab label="Featured Categories" value="featured_categories"
                   className={(this.state.tabSelected === 'featured_categories') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              </Tab>
              <Tab label="Featured Stores" value="featured_stores"
                   className={(this.state.tabSelected === 'featured_stores') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              </Tab>

            </Tabs>

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