import React from 'react';
import {observer, inject} from 'mobx-react';
import {Link} from 'react-router';
import bind from 'bind-decorator';
import {
  FontIcon,
  Tabs, Tab
} from 'material-ui';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
import ContentAdd from 'material-ui/svg-icons/content/add';
import {withRouter} from 'react-router';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import './style.scss';
import {appConfig} from "../../config/app";

import Airlines from './Airlines/Airlines';
import AirlinesINTL from "./AirlinesINTL/AirlinesINTL";
import Bus from "./Bus/Bus";
import Hotel from "./Hotel/Hotel";
import Railink from "./Railink/Railink";
import Train from "./Train/Train";
import PPOB from './PPOB/PPOB';
import Package from './Package';
import SnackbarMessage from './SnackbarMessage';

@inject('appstate')
@observer
export default class ServiceTabsComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(props)
    this.props = props;
    this.state = {
      tabSelected: '/app/service/packages',
    };
    this.handleChange = this.handleChange.bind(this);
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

  componentDidMount() {
    // this.props.history.push(this.state.tabSelected);
  }

  handleChange = (tabSelected) => {
    this.setState({
      tabSelected: tabSelected,
    });
    this.props.history.push(tabSelected);
  };

  render() {
    return (
      <div>
        <Tabs
          value={this.state.tabSelected}
          onChange={this.handleChange}
          inkBarStyle={{background: 'transparent'}}
          className="tabsAkun"
          style={{background: 'transparent'}}>
          <Tab key="Packages"
               label="Packages"
               component={<Package/>}
               to="/app/service/packages"
               value="/app/service/packages"
               className={(this.state.tabSelected === '/app/service/packages') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
          </Tab>
          {(() => {
            if(appConfig.type === 'dsm') {
              return (<div></div>);
            }

            return (<Tab key="Airlines"
                         label="Airlines"
                         component={<Airlines/>}
                         to="/app/service/airlines"
                         value="/app/service/airlines"
                         className={(this.state.tabSelected === '/app/service/airlines') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
            </Tab>);
          })()}
          {(() => {
            if (window.location.href.includes("dsmtravel.com")) {
              return [];
            }
            return [
              <Tab key="Train"
                   label="Train"
                   component={<Train/>}
                   to="/app/service/trains"
                   value="/app/service/trains"
                   className={(this.state.tabSelected === '/app/service/trains') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              </Tab>,
              <Tab key="Railink" label="Railink" value="/app/service/railinks"
                   className={(this.state.tabSelected === '/app/service/railinks') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
                <Railink/>
              </Tab>,
              <Tab key="Bus" label="Bus" value="/app/service/busses"
                   className={(this.state.tabSelected === '/app/service/busses') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
                <Bus/>
              </Tab>,
              <Tab key="Hotel" label="Hotel" value="/app/service/hotels"
                   className={(this.state.tabSelected === '/app/service/hotels') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
                <Hotel/>
              </Tab>,
              <Tab key="PPOB" label="PPOB" value="/app/service/ppob"
                   className={(this.state.tabSelected === '/app/service/ppob') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
                <PPOB/>
              </Tab>
            ]
          })()}
        </Tabs>
      </div>
    )
  }
}
