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, TextField, Dialog
} 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 FormBook extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {

    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

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

  }

  render() {

    const data = {
      name: 'SAPTA PETALA',
      city: 'Asia - South Eastern Asia - Kuta',
      address: 'JL. KUBU ANYAR NO 27, KUTA',
      telephone:'(62) 361 - 761 - 093',
      fax:'(62) 361 - 752 - 667',
      email:'rsv.saptapetala@gmail.com',
      price:'200,000'
    };

    return (
      <div className="animated fadeIn cardLite">
        <div className="col s12 l7 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="Booking Hotel"/>
                </ToolbarGroup>
              </Toolbar>
              <Divider/>
                <div style={{padding: '14px'}}>
                  <div className="row">
                    <div className="col s12 m12 l12">
                      <p className="label-form">Customer's Name</p>
                      <TextField
                        hintText="Your Name Here"
                        fullWidth={true}
                      />
                    </div>
                  </div>
                  <div className="row">
                    <div className="col s12 m6 l6">
                      <p className="label-form">Phone Number</p>
                      <TextField
                        hintText="E.g 081167930404"
                        fullWidth={true}
                      />
                    </div>
                    <div className="col s12 m6 l6">
                      <div>
                        <p className="label-form">Email</p>
                        <TextField hintText="E.g email@example.com" fullWidth={true}/>
                      </div>
                    </div>
                  </div>
                  <div className="row">
                    <div className="col m6" />
                    <div className="col m6" style={{textAlign:'right'}}>
                      <RaisedButton label={"Proceed"} onClick={this.props.onConfirm} primary={true} style={{marginTop: '30px'}} icon={ <FontIcon className="material-icons">check</FontIcon>} />
                    </div>
                  </div>
                </div>
            </Card>
          </div>
        </div>
        <div className="col s12 l5">
          <Card>
            <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
              <ToolbarGroup>
                <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Detail'}/>
              </ToolbarGroup>
            </Toolbar>
            <Divider/>
            <div style={{padding:'14px'}}>
              <div className="row">
                <div className="col m12">
                  <p>Hotel : {data.name}</p>
                </div>
              </div>
              <div className="row">
                <div className="col m12">
                  <p>City : {data.city}</p>
                </div>
              </div>
              <div className="row">
                <div className="col m12">
                  <p>Address : {data.address} </p>
                </div>
              </div>
              <div className="row">
                <div className="col m12">
                  <p>Telephone : {data.telephone}</p>
                </div>
              </div>
              <div className="row">
                <div className="col m12">
                  <p>Fax : {data.fax}</p>
                </div>
              </div>
              <div className="row">
                <div className="col m12">
                  <p>Email : {data.email}</p>
                </div>
              </div>
            </div>
            <div className="row">
            <div className="col l12">
                <div className="row"><div className="col l8 ">
                     <p className="top-text">Superior (1 Room)</p>
                  </div>
                  <div className="col l4 ">
                    <p className="top-text">Rp. 200,000</p>
                  </div>
                </div>
                <div className="row passive">
                <div className="col l8 ">
                  <p className="top-text">Taxs</p>
                </div>
                <div className="col l4 ">
                  <p className="top-text">Included</p>
                </div>
              </div>
              <div className="row">
                <Divider/>
              </div>
              <div className="row">
                <div className="col l8 ">
                   <p className="top-text">Total</p>
                </div>
                <div className="col l4 ">
                  <p className="top-text"><strong>Rp. 200,000</strong></p>
                </div>
              </div>
             </div>
            </div>
          </Card>
        </div>
      </div>
    )
  }
}
