import React from 'react';
import {inject, observer} from 'mobx-react';
import {Link} from 'react-router';
import {Tab, Tabs} from 'material-ui';
import './style.scss';
import All from "./All/index";
// import Active from "./Active/index";
// import Unactive from "./Unactive/index";
// import SoldOut from "./SoldOut/index";
// import Banned from "./Banned/index";

export const ITEM_TABS = {
  ALL: 'all',
  ACTIVE: 'active',
  // UNACTIVE : 'unactive',
  // SOLD_OUT: 'sold_out',
  // BANNED: 'banned',
};

@inject('appstate')
@observer
export default class Promotion extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      tabSelected: 'all',
    };
    this.handleChange = this.handleChange.bind(this);
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;
    this.appStore = props.appstate.app;
    this.myStore = props.appstate.myStore;
  }

  componentDidMount() {
  }

  handleChange = (tabSelected) => {
    this.setState({tabSelected: tabSelected});
    this.globalUI.itemsTabSelected = tabSelected;
  };

  getContent() {
    switch (this.globalUI.itemsTabSelected) {
      case ITEM_TABS.ALL:
        return <All/>;
      // case ITEM_TABS.ACTIVE:
      //   return <Active/>;
      // case ITEM_TABS.UNACTIVE:
      //   return <Unactive/>;
      // case ITEM_TABS.SOLD_OUT:
      //   return <SoldOut/>;
      // case ITEM_TABS.BANNED:
      //   return <Banned/>;
      default:
        return <All/>
    }
  }

  render() {

    const {type:appType} = this.appStore;

    return (
      <div className="setting containerMiddle">
        <div className="row">
          <div className="col l12 m12 s12 no-padding">
            <Tabs
              value={this.globalUI.itemsTabSelected}
              onChange={this.handleChange}
              inkBarStyle={{background: 'transparent'}}
              className="tabsAkun"
              style={{background: 'transparent'}} >
              <Tab label="All" value="all" className={(this.globalUI.itemsTabSelected === 'all') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              </Tab>
              {/*<Tab label="Active" value="active" className={(this.globalUI.itemsTabSelected === 'active') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>*/}

              {/*</Tab>*/}
              {/*<Tab label="Inactive" value="unactive" className={(this.globalUI.itemsTabSelected === 'unactive') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>*/}

              {/*</Tab>*/}
              {/*<Tab label="Sold Out" value="sold_out" className={(this.globalUI.itemsTabSelected === 'sold_out') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>*/}

              {/*</Tab>*/}
              {/*<Tab label="Banned" value="banned" className={(this.globalUI.itemsTabSelected === 'banned') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>*/}
              {/**/}
              {/*</Tab>*/}
            </Tabs>
            {this.getContent()}
          </div>
        </div>
      </div>
    )
  }
}
