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,
  TextField,
  RadioButton, RadioButtonGroup, DropDownMenu,
  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";
import PassangerForm from './PassangerForm';

@inject('appstate')
@observer
export default class FormBook extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      c_name: '',
      c_email: '',
      c_phone: '',
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

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

  }

  handleCustomerName = (event, value) => {
    this.setState({
      c_name: value
    })
  };

  handleCustomerPhone = (event, value) => {
    this.setState({
      c_phone: value
    })
  };

  handleCustomerName = (event, value) => {
    this.setState({
      c_email: value
    })
  };


  render() {
    var arr = [];
    for (var x = 0; x < this.props.passangerData.passanger; x++) {
      arr.push(x + 1);
    }


    return (

      <div className="animated fadeIn cardLite">
        <div className="col s12 l8 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 Bus'}/>
                </ToolbarGroup>
              </Toolbar>

              <Divider/>

              <div style={{padding: '14px'}}>
                <div className="row">
                  <div className="col s12 l12">
                    <div>
                      <p className="label-form">Customer's Name</p>
                      <TextField hintText="Your name here" fullWidth={true}/>
                    </div>
                  </div>
                </div>
                <div className="row">
                  <div className="col s12 l6">
                    <div>
                      <p className="label-form">Phone Number</p>
                      <TextField hintText="E.g 081167930404" fullWidth={true}/>
                    </div>
                  </div>
                  <div className="col s12 l6">
                    <div>
                      <p className="label-form">Email</p>
                      <TextField hintText="E.g email@example.com" fullWidth={true}/>
                    </div>
                  </div>
                  <div className="col m6"></div>
                  <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>
          {arr.map((x) => {
            return (<PassangerForm no={x}/>)
          })}

        </div>

        <div className="col s12 l4">
          <Card>
            <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
              <ToolbarGroup>
                <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Bus'}/>
              </ToolbarGroup>
            </Toolbar>
            <Divider/>
            <div style={{padding: '14px'}}>
              <div className="row">
                <div className="col l6">
                  <img src={`${this.props.busData.image}`} className="logo-maskapai"/>
                </div>
                <div className="col l6">
                  <p>Bus Code : {this.props.busData.desc.bus}</p>
                  <p className="passive">{this.props.busData.desc.date}</p>
                </div>
              </div>
              <div className="row">
                <div>
                  <div className="col l12">
                    <div className="row">
                      <div className="col l3 ">
                        <p className="top-text">{this.props.busData.desc.depature.time}</p>

                      </div>
                      <div className="col l9 ">
                        <p className="top-text">{this.props.busData.desc.depature.station}</p>
                        <p className="passive">Bandung</p>
                      </div>
                    </div>
                    <div className="row">
                      <div className="col l3">
                        <FontIcon className="material-icons" style={{color: '#B7B7B7'}}>directions_bus</FontIcon>
                      </div>
                    </div>
                    <div className="row">
                      <div className="col l3 ">
                        <p className="top-text"> {this.props.busData.desc.destination.time}</p>

                      </div>
                      <div className="col l9 ">
                        <p className="top-text">{this.props.busData.desc.destination.station}</p>
                        <p className="passive">Jakarta</p>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    )
  }
}
