import React from 'react';
import {observer, inject} from 'mobx-react';
import {Link} from 'react-router';
import bind from 'bind-decorator';
import {
  FontIcon,
  Tabs, Tab, IconButton, ToolbarGroup, Card, Divider, Toolbar, ToolbarTitle
} 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 './style.scss';
import {appConfig} from "../../config/app";

import ServiceTabs from './tabs';
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';
import {LINKS} from "../../routes";
import ServicePackageComponent from './../Service/Package';
import ServicePackageDetailComponent from './../Service/Package/DetailPackage';
import ServiceAirlinesComponent from './../Service/Airlines/CheckSchedule';
import ServiceAirlinesListComponent from './../Service/Airlines/ListAirlines';
import ServiceAirlinesFormBookComponent from './../Service/Airlines/FormBook';
import ServiceTrainComponent from './../Service/Train/Train';
import ServiceBusComponent from './../Service/Bus/Bus';
import ServiceHotelComponent from './../Service/Hotel/Hotel';
import ServiceRailinkComponent from './../Service/Railink/Railink';
import ServicePPOBComponent from './../Service/PPOB/PPOB';

import {
  Route,
  Switch
} from 'react-router-dom';
import EmptyComponent from "../EmptyComponent";
import Review from './Airlines/Review';
import BreadcrumbComponent from "../Breadcrumb";

class DefaultComponent extends React.Component {
  render() {
    return (<div className="row">
      <div className="col s12 l12">
        <Card className="animated fadeIn cardLite">
          <EmptyComponent type="default3"
                          header="Choose a Services"
                          content="Welcome, enjoy packages, airlines, train, railink, bus, hotel and ppob anhywhere and anytime"/>
        </Card>
      </div>
    </div>);
  }
}

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

  componentDidMount() {}

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

  render() {

    return (
      <div className="service containerMiddle">
        <div className="row" style={{marginBottom: 0}}>
          <Tabs
            value={this.state.tabSelected}
            initialSelectedIndex={0}
            onChange={this.handleChange}
            inkBarStyle={{background: 'transparent'}}
            className="tabsAkun"
            style={{background: 'transparent'}}>
            <Tab key="Packages" label="Packages" value="/app/service/packages"
                 className={(this.state.tabSelected === '/app/service/packages') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
            </Tab>
            <Tab key="Airlines" label="Airlines" value="/app/service/airlines"
                 className={(this.state.tabSelected === '/app/service/airlines') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
            </Tab>
            {(() => {
              return [];
              // if (window.location.href.includes("dsmtravel.com")) {
              //   return [];
              // }
              // return [
              //   <Tab key="Train" label="Train" 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'}>
              //   </Tab>,
              //   <Tab key="Bus" label="Bus" value="/app/service/busses"
              //        className={(this.state.tabSelected === '/app/service/busses') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              //   </Tab>,
              //   <Tab key="Hotel" label="Hotel" value="/app/service/hotels"
              //        className={(this.state.tabSelected === '/app/service/hotels') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              //   </Tab>,
              //   <Tab key="PPOB" label="PPOB" value="/app/service/ppob"
              //        className={(this.state.tabSelected === '/app/service/ppob') ? "buttonTabs  buttonTabsActive" : 'buttonTabs'}>
              //   </Tab>
              // ]
            })()}
          </Tabs>
        </div>
        <BreadcrumbComponent/>
        <Switch>
          <Route exact component={ServicePackageComponent} path={LINKS.SERVICE_PACKAGES}/>
          <Route exact component={ServicePackageDetailComponent} path={LINKS.SERVICE_PACKAGES_DETAIL}/>
          <Route exact component={ServiceAirlinesComponent} path={LINKS.SERVICE_AIRLINES}/>
          <Route exact component={ServiceAirlinesListComponent} path={LINKS.SERVICE_AIRLINES_SEARCH}/>
          <Route exact component={ServiceAirlinesListComponent} path={LINKS.SERVICE_AIRLINES_SEARCH_RETURN}/>
          <Route exact component={ServiceAirlinesFormBookComponent} path={LINKS.SERVICE_AIRLINES_BOOK}/>
          {/* <Route component={Review} path={LINKS.SERVICE_AIRLINES_REVIEW}/> */}
          <Route component={Review} path={LINKS.SERVICE_AIRLINES_REVIEW+'/:id'}/>
          <Route exact component={ServiceBusComponent} path={LINKS.SERVICE_BUSSES}/>
          <Route exact component={ServiceHotelComponent} path={LINKS.SERVICE_HOTELS}/>
          <Route exact component={ServiceRailinkComponent} path={LINKS.SERVICE_RAILINKS}/>
          <Route exact component={ServiceTrainComponent} path={LINKS.SERVICE_TRAINS}/>
          <Route exact component={ServicePPOBComponent} path={LINKS.SERVICE_PPOB}/>
          <Route exact component={DefaultComponent} path={LINKS.SERVICE} />
        </Switch>
      </div>
    )
  }
}
