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 FormTrainSeat 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'
    };
      const wagonConfig = {
        text : 'number',
        value : 'value'
      }
      const wagonNumber = [
        {number: '1', value: 1},
        {number: '2', value: 2},
        {number: '3', value: 3},
        {number: '4', value: 4},
        {number: '5', value: 5},
        {number: '6', value: 6},
        {number: '7', value: 7},
        {number: '8', value: 8},
        {number: '9', value: 9},
        {number: '10', value: 10},
        {number: '11', value: 11},
        {number: '12', value: 12},
      ];
      const seatNumber = [
        {number: '1A', value: 1},
        {number: '1B', value: 2},
        {number: '2A', value: 3},
        {number: '2B', value: 4},
        {number: '3A', value: 5},
        {number: '3B', value: 6},
        {number: '4A', value: 7},
        {number: '4B', value: 8},
        {number: '5A', value: 9},
        {number: '5B', value: 10},
        {number: '6A', value: 11},
        {number: '6B', value: 12},
        {number: '7A', value: 13},
        {number: '7B', value: 14},
        {number: '8A', value: 15},
        {number: '8B', value: 16},
        {number: '9A', value: 17},
        {number: '9B', value: 18},
        {number: '10A', value: 19},
        {number: '10B', value: 20},
        {number: '11A', value: 21},
        {number: '11B', value: 22},
        {number: '12A', value: 23},
        {number: '12B', value: 24},
      ];

    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="Choose Your Seat"/>
                </ToolbarGroup>
              </Toolbar>
              <Divider/>
                <div style={{padding: '14px'}}>
                  <div className="row">
                    <div className="col s12 l6">
                      <p className="label-form">Wagon Number</p>
                      <AutoComplete
                        hintText="Choose your desired wagon number"
                        dataSource={wagonNumber}
                        dataSourceConfig={wagonConfig}
                        filter={AutoComplete.caseInsensitiveFilter}
                        openOnFocus={true}
                        menuStyle={{maxHeight: 300}}
                        fullWidth={true}
                      />
                    </div>
                    <div className="col s12 l6"></div>
                  </div>
                  <div className="row">
                    <div className="col s12 l6">
                      <p className="label-form">Seat Number</p>
                      <AutoComplete
                        hintText="Choose your desired seat number"
                        dataSource={seatNumber}
                        dataSourceConfig={wagonConfig}
                        filter={AutoComplete.caseInsensitiveFilter}
                        openOnFocus={true}
                        menuStyle={{maxHeight: 300}}
                        fullWidth={true}
                      />
                    </div>
                    <div className="col s12 l6">
                    </div>
                  </div>
                  <div className="row">
                    <div className="col l12">
                      <p className="label-form">Seat Map</p>
                      <img src="../../../../../assets/images/services/seat_eks.png" width="100%" style={{marginTop: '10px'}}/>
                    </div>
                  </div>
                  <div className="row">
                    <div className="col l9"></div>
                    <div className="col l3">
                      <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>
    )
  }
}
