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 FormTrainCustomers 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 = {
      ka_name: 'ARGO DWIPANGGA',
      ka_number: '10',
      class: 'Executive (A)',
      departureStation: 'GAMBIR (GMR)',
      destinationStation: 'YOGYAKARTA (YK)',
      departureDate: '18 September 2017, 08:00',
      destinationDate: '18 September 2017, 15:39',
      adultPrice: '380000',
      totalBuy: '1'
    };

    return (
      <div className="animated fadeIn">
        <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 Train"/>
                </ToolbarGroup>
              </Toolbar>
              <Divider/>
                <div style={{padding: '14px'}}>
                  <div className="row">
                    <div className="col m12">
                      <p className="label-form">Customer's Name</p>
                      <TextField
                        hintText="Your Name Here"
                        fullWidth={true}
                      />
                    </div>
                  </div>
                  <div className="row">
                    <div className="col m12">
                      <p className="label-form">Phone Number</p>
                      <TextField
                        hintText="E.g 081167930404"
                        fullWidth={true}
                      />
                    </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={'Train Information'}/>
              </ToolbarGroup>
            </Toolbar>
            <Divider/>
            <div style={{padding:'14px'}}>
              <div className="row">
                <div className="col m12">
                  Train Name : {data.ka_name}
                </div>
              </div>
              <div className="row">
                <div className="col m12">
                  Class : {data.class}
                </div>
              </div>
              <div className="row">
                <div className="col m6">
                  <p>Train Number : {data.ka_number}</p>
                </div>
                <div className="col m6">
                  <p className="passive">22 September 2017</p>
                </div>
              </div>
              <div className="row">
                <div>
                  <div className="col l12">
                    <div className="row">
                      <div className="col l6 " style={{textAlign:'center'}}>
                        <p className="top-text">{data.departureDate}</p>
                      </div>
                      <div className="col l6 ">
                        <p className="top-text">{data.departureStation}</p>
                        <p className="passive">Jakarta Pusat</p>
                      </div>
                    </div>
                    <div className="row">
                      <div className="col l6" style={{textAlign:'center', marginTop: '-10px'}}>
                        <FontIcon className="material-icons" style={{color:'#B7B7B7'}}>train</FontIcon>
                        <FontIcon className="material-icons" style={{color:'#B7B7B7'}}>arrow_downward</FontIcon>
                      </div>
                    </div>
                    <div className="row">
                     <div className="col l6 " style={{textAlign:'center'}}>
                       <p className="top-text">{data.destinationDate}</p>
                     </div>
                     <div className="col l6 ">
                       <p className="top-text">{data.destinationStation}</p>
                       <p className="passive">Daerah Istimewa Yogyakarta</p>
                     </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    )
  }
}
