import React from 'react';
import {observer, inject} from 'mobx-react';
import bind from 'bind-decorator';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  AutoComplete,
  CardText,
  FlatButton,
  Divider,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  SelectField,
  MenuItem,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  RadioButton, 
  RadioButtonGroup,
  DropDownMenu,
  TextField,
    Tabs, Tab,
} from 'material-ui';
import { withRouter } from 'react-router';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
import ContentAdd from 'material-ui/svg-icons/content/add';

import '../style.scss';
import {appConfig} from "../../../config/app";

@inject('appstate')
@observer
export default class CheckSchedule extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 1,
      searchText: '',
      tabSelected: '/app/service/hotel',
      destination:'',
      room:1,
      typeRoom:1,
      adultGuestRoom:1,
      childGuestRoom:0,
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

  componentDidMount() {
    console.log('Profile loaded!');

  }


  handleDestinationBus = (bus) =>{
      this.setState({
        destinationBus : bus.value
      })
  };

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


  handleUpdateInput = (searchText) => {
    this.setState({
      searchText: searchText,
    });
  };

  handleNewRequest = () => {
    this.setState({
      searchText: '',
    });
  };

  handleRoom = (event, index, value) => {
    this.setState({
      room: value 
    });
  };

  handleTypeRoom = (event, index, value) => {
    this.setState({
      typeRoom: value
    });
  };

  handleAdultGuestRoom = (event, index, value) => {
    this.setState({
      adultGuestRoom: value
    });
  };

  handleChildGuestRoom = (event, index, value) => {
    this.setState({
      childGuestRoom: value
    });
  };

  handleDestination = (event, index, value) => {
    this.setState({
      destination: value
    });
  };

  handleChange = (event, index, value) => this.setState({value});

  render() {

    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

    const hotelConfig = {
      text : 'hotel',
      value : 'value'
    }

    const city = [
      'Jakarta',
      'Bali',
      'Surabaya',
      'Yogyakarta',
      'Aceh',
      'Kalimantan',
      'Medan',
      'Papua',
    ];

    const destination = [
      <MenuItem key={0} value={""} primaryText="Choose Destination"/>,
      <MenuItem key={1} value={1} primaryText="Domestic Hotel"/>,
      <MenuItem key={2} value={2} primaryText="International hotel"/>
    ];

    const room = [
      <MenuItem key={1} value={1} primaryText="1 Room"/>,
      <MenuItem key={2} value={2} primaryText="2 Rooms"/>,
      <MenuItem key={3} value={3} primaryText="3 Rooms"/>,
      <MenuItem key={4} value={4} primaryText="4 Rooms"/>,
    ];

    const typeRoom = [
      <MenuItem key={1} value={1} primaryText="Default Bed"/>,
      <MenuItem key={2} value={2} primaryText="Twin Bed"/>,
      <MenuItem key={3} value={3} primaryText="Double Bed"/>,
    ];

    const adultGuest = [
      <MenuItem key={1} value={1} primaryText="1"/>,
      <MenuItem key={2} value={2} primaryText="2"/>,
      <MenuItem key={3} value={3} primaryText="3"/>,
      <MenuItem key={4} value={4} primaryText="4"/>,
    ];

    const childGuest = [
      <MenuItem key={0} value={0} primaryText="0"/>,
      <MenuItem key={1} value={1} primaryText="1"/>,
      <MenuItem key={2} value={2} primaryText="2"/>
    ];

    return (
      <Card>
          <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
          <ToolbarGroup>
            <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={(this.state.value == 1)? 'Find Schedule' : 'Find Transaction Data'}/>
          </ToolbarGroup>
          <ToolbarGroup>
            <FontIcon className="muidocs-icon-custom-sort"/>
            <ToolbarSeparator/>
            <DropDownMenu value={this.state.value} onChange={this.handleChange}>
              <MenuItem value={1} primaryText="Schedule" />
            </DropDownMenu>
          </ToolbarGroup>
        </Toolbar>
          <Divider/>
          <div style={{padding: '14px'}}>
            <div className="row">
              <div className="col s12 l4">
                <p className="label-form">Destination</p>
                <SelectField
                  value={this.state.destination}
                  onChange={this.handleDestination}
                  fullWidth={true}
                >
                  {destination}
                </SelectField>
              </div>
              <div className="col s12 l4">
                <div>
                  <p className="label-form">City</p>
                    <AutoComplete
                      hintText="Choose City"
                      dataSource={city}
                      dataSourceConfig={hotelConfig}
                      filter={AutoComplete.caseInsensitiveFilter}
                      onNewRequest={this.handleDepatureBus}
                      openOnFocus={true}
                      menuStyle={{maxHeight: 300}}
                      fullWidth={true}
                    />
                </div>
              </div>
              <div className="col s12 l4">
                <div>
                  <p className="label-form">Hotel(Optional)</p>
                  <TextField
                  hintText="Name Hotel"
                />
                </div>
              </div>
            </div>

            <div className="row">
              <div className="col s12 l6">
              <div>
                  <p className="label-form">Check In</p>
                  <DatePicker fullWidth={true} style={{width: '100%'}} hintText="2017-08-17"/>
                </div>
              </div>
              <div className="col s12 l6">
                <div>
                  <p className="label-form">Check Out</p>
                  <DatePicker fullWidth={true} style={{width: '100%'}} hintText="2017-08-17"/>
                </div>
              </div>
            </div>

            <div className="row">
              <div className="col s6 l3">
                <p className="label-form" >Room</p>
                <SelectField
                  value={this.state.room}
                  onChange={this.handleRoom}
                  fullWidth={true}
                  >
                  {room}
                </SelectField> 
              </div>
              <div className="col s6 l3">
                <p className="label-form" >Type of Room</p>
                <SelectField
                  value={this.state.typeRoom}
                  onChange={this.handleTypeRoom}
                  fullWidth={true}
                  >
                  {typeRoom}
                </SelectField> 
              </div>
              <div className="col s6 l3">
                <p className="label-form" >Adult Guests Room</p>
                <SelectField
                  value={this.state.adultGuestRoom}
                  onChange={this.handleAdultGuestRoom}
                  fullWidth={true}
                  >
                  {adultGuest}
                </SelectField> 
              </div>
              <div className="col s6 l3">
                <p className="label-form" >Children Guests Room</p>
                <SelectField
                  value={this.state.childGuestRoom}
                  onChange={this.handleChildGuestRoom}
                  fullWidth={true}
                  >
                  {childGuest}
                </SelectField> 
              </div>
              </div>

              <div className="row">
                <div className="col s0 l10"></div>
                <div className="col s0 l2">
                  <RaisedButton label="Find Schedule" primary={true} onClick={this.props.onClickFind} icon={ <FontIcon className="material-icons">search</FontIcon>}/>
                </div>
              </div>

            </div>
      </Card>
          
    )
  }
}