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,
  Tabs, Tab,
  Checkbox,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
} 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 RoomHotel extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      sortBy: 0,
      qty:0
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

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

  }

  handleSortBy = (event, index, value) => {
    this.setState({
      sortBy: value 
    });
  };

  handleQty = (event, index, value) => {
    this.setState({
      qty: value
    });
  };

  updateCheck() {
    this.setState((oldState) => {
      return {
        checked: !oldState.checked,
      };
    });
  }

  render() {

    const data =
      {
        'image' : 'http://cdn.infiniqa.com/hotel/mg/WSASIDDPS000439/hd/UK2VfmMD2Np9BR5MWrMyOqslSl4AHTROmeFPjMJHOW2tyVNbo95Enw9eMYhdc_+idEmTuzP8MAtQ8MHkhceT23LHGUWfTyVD5NOn8ZqrYZvOSLruoAsB2F0qTiqNdDYb+Bg==.jpg',
        hotelName : "SAPTA PETALA",
        hotelAddress : "JL. KUBU ANYAR NO 27, KUTA",
        checkIn : '24 Sep 2017',
        checkOut : '25 Sep 2017',
        class : 'VVIP',
        price : '200.000',
        GeneralCity : 'Asia - South Eastern Asia - Kuta',
        phone :'(62) 361 - 761 - 093',
        fax : '(62) 361 - 752 - 667',
        email : 'rsv.saptapetala@gmail.com',
        web : '-',
        room : '2',
        guest : '1'
      };

    const sortBy = [
      <MenuItem key={0} value={""} primaryText=""/>,
      <MenuItem key={1} value={1} primaryText="Price (hight to low)"/>,
      <MenuItem key={2} value={2} primaryText="Price (low to hight)"/>,
      <MenuItem key={3} value={3} primaryText="Star (hight)"/>,
      <MenuItem key={4} value={4} primaryText="Star (low)"/>,
    ];

    const qty = [
      <MenuItem key={0} value={0} primaryText="0"/>,
      <MenuItem key={1} value={1} primaryText="1"/>,
    ];
    return (
          <div className="animated fadeIn">
              <div className="col s12 m12 l12 left-panel">
                <div className="row">
                  <Card>
                  <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                  <ToolbarGroup>
                  <IconButton
                    iconClassName="material-icons"
                    tooltip="Back"
                    style={{marginLeft:'0px'}}
                    onClick={this.props.onClickBack}
                  >
                    arrow_back
                  </IconButton>
                    <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Find Schedule'}/>
                  </ToolbarGroup>
                </Toolbar>
                <Divider/>
              <div>
                <div style={{padding: '14px'}}>
                
                  <div className="row">
                    <div className="col m4">
                      <img src={`${data.image}`} className="img-responsive"/>
                    </div>
                    <div className="col m8">
                      <div className="row">
                        <div className="col m12">
                          <p style={{color:'#FF8926',fontWeight:'bold',fontSize:'16px'}}>{data.hotelName}</p>
                          <p>
                            <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                            <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                            <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                          </p>
                          <p className="passive"><FontIcon className="material-icons">place</FontIcon><span className="duration">{data.GeneralCity}</span></p>
                          <p className="passive"><FontIcon className="material-icons">place</FontIcon><span className="duration">{data.hotelAddress}</span></p>
                          <p className="passive"><FontIcon className="material-icons">phone</FontIcon><span className="duration">{data.phone} | </span><FontIcon className="material-icons">print</FontIcon><span className="duration"> {data.fax} |</span><FontIcon className="material-icons">email</FontIcon><span className="duration"> {data.email} |</span></p>
                          <p className="passive"><FontIcon className="material-icons">web</FontIcon><span className="duration"> {data.web}</span></p>
                          <br />
                        </div>
                      </div>
                      <div className="row" style={{marginTop:'20px'}}>
                        <div className="col m3">
                          <p className="sub-hotel">
                            Check In
                          </p>
                          <br />
                          {data.checkIn}
                        </div>
                        <div className="col m3">
                          <p className="sub-hotel">
                            Check Out
                          </p>
                          <br />
                          {data.checkOut}
                        </div>
                        <div className="col m3">
                          <p className="sub-hotel">
                            Room(s)
                          </p>
                          <br />
                          {data.room}
                        </div>
                        <div className="col m3">
                          <p className="sub-hotel">
                            Guest(s)
                          </p>
                          <br />
                          {data.guest}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="row">
                    <div className="row">
                      <h3 className="facility">Hotel Facility</h3>
                    </div>
                    <div className="row">
                      <div className="col m4" style={{borderBottom:'1px solid #eaecf0', paddingBottom:'3px'}}> 
                        <Checkbox
                          label="Concierge"
                          checked={true}
                        />
                      </div>
                      <div className="col m4" style={{borderBottom:'1px solid #eaecf0', paddingBottom:'3px'}}>
                        <Checkbox
                          label="Rent car"
                        />
                        
                      </div>
                      <div className="col m4" style={{borderBottom:'1px solid #eaecf0', paddingBottom:'3px'}}>
                        <Checkbox
                          label="TV"
                        />
                        
                      </div>
                    </div>
                    <div className="row">
                      <div className="col m4" style={{borderBottom:'1px solid #eaecf0', paddingBottom:'3px'}}> 
                        <Checkbox
                          label="Drycleaning Onsite"
                        />
                      </div>
                      <div className="col m4" style={{borderBottom:'1px solid #eaecf0', paddingBottom:'3px'}}>
                        <Checkbox
                          label=" Restaurant"
                        />
                        
                      </div>
                      <div className="col m4" style={{borderBottom:'1px solid #eaecf0', paddingBottom:'3px'}}>
                        <Checkbox
                          label="Water"
                        />    
                      </div>
                    </div>
                    <div className="row">
                      <div className="col m4" style={{borderBottom:'1px solid #eaecf0', paddingBottom:'3px'}}> 
                        <Checkbox
                          label="Laundry"
                        />
                      </div>
                      <div className="col m4" style={{borderBottom:'1px solid #eaecf0', paddingBottom:'3px'}}>
                        <Checkbox
                          label="Safe Deposit Box"
                        />
                        
                      </div>
                      <div className="col m4" style={{borderBottom:'1px solid #eaecf0', paddingBottom:'3px'}}>
                        <Checkbox
                          label="Wifi"
                        />
                        
                      </div>
                    </div>
                    <div className="row">
                        <div className="col m4" style={{borderBottom:'1px solid #eaecf0', paddingBottom:'3px'}}> 
                          <Checkbox
                            label="Parking"
                          />
                        </div>
                        <div className="col m4" style={{borderBottom:'1px solid #eaecf0', paddingBottom:'3px'}}>
                          <Checkbox
                            label="Swimming Pool"
                          />
                          
                        </div>
                    </div>
                  </div>
                </div>
                <Divider/>
              </div>
                </Card>
                </div>
                <div className="row">
                <Card>
                  <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                    <ToolbarGroup>
                      <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Detail Room'}/>
                    </ToolbarGroup>
                  </Toolbar>
                  <Divider/>
                  <div style={{padding:'14px'}}>
                    <div className="row">
                      <div className="col m12">
                        <Table>
                          <TableHeader displaySelectAll={false} style={{backgroundColor: 'rgb(232, 232, 232)'}}>
                            <TableRow>
                              <TableHeaderColumn>Room Type</TableHeaderColumn>
                              <TableHeaderColumn>Bed Type</TableHeaderColumn>
                              <TableHeaderColumn>Board</TableHeaderColumn>
                              <TableHeaderColumn>Price</TableHeaderColumn>
                              <TableHeaderColumn>Quantity</TableHeaderColumn>
                            </TableRow>
                          </TableHeader>
                          <TableBody displayRowCheckbox={false} showRowHover={true}	>
                            <TableRow>
                              <TableRowColumn>Superior</TableRowColumn>
                              <TableRowColumn>Single</TableRowColumn>
                              <TableRowColumn>Room Only</TableRowColumn>
                              <TableRowColumn>IDR 200,000</TableRowColumn>
                              <TableRowColumn>
                                <SelectField
                                  value={this.state.qty}
                                  onChange={this.handleQty}
                                  fullWidth={true}
                                  >
                                  {qty}
                                </SelectField> 
                              </TableRowColumn>
                            </TableRow>
                            <TableRow>
                              <TableRowColumn>DELUXE</TableRowColumn>
                              <TableRowColumn>Single</TableRowColumn>
                              <TableRowColumn>Room Only</TableRowColumn>
                              <TableRowColumn>IDR 230,000</TableRowColumn>
                              <TableRowColumn>
                                <SelectField
                                  value={this.state.qty}
                                  onChange={this.handleChildGuestRoom}
                                  fullWidth={true}
                                  >
                                  {qty}
                                </SelectField>
                              </TableRowColumn>
                            </TableRow>
                          </TableBody>
                        </Table>
                      </div>
                    </div>
                    <div className="row">
                    <div className="col m10"></div>
                      <div className="col m2">
                        <RaisedButton label="Book Room" primary={true} onClick={this.props.onBook} icon={ <FontIcon className="material-icons">thumb_up</FontIcon>}/>
                      </div>
                    </div>
                  </div>
                </Card>
                </div>
              </div>
            </div>
    )
  }
}
