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 TrainConfirmation extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      openModal: false
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

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

  }

  handleCloseModal = ()=>{
    this.setState({
      openModal : false
    })
  };

  handleOpenModal = ()=>{
    this.setState({
      openModal : true
    })
  }

  render() {
    const actionsModals = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleCloseModal}
      />,
      <FlatButton
        label="Ok"
        primary={true}
        onClick={this.props.onSuccessModal}
      />,
    ];

    const data = {
      ka_name: 'ARGO DWIPANGGA (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',
      passenger: 'Tsabit Ghazwan',
      passengerNumber: '082112365478',
      wagonNumber: '2',
      seatNumber: '2A'
    };

    return (
      <Card className="animated fadeIn">
        <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="Confirmation"/>
          </ToolbarGroup>
        </Toolbar>
        <Divider/>
          <div style={{padding: '14px'}}>
            <div className="row hover">
              <div className="col l4">
                <p style={{fontWeight: 'bolder'}}>Train Information</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p>Train Name (Train Number)</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p>{data.ka_name}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p>Class</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p>{data.class}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p>Departure Station</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p>{data.departureStation}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p>Destination Station</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p>{data.destinationStation}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p>Departure Date</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p>{data.departureDate}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p>Destination Date</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p>{data.destinationDate}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l4">
                <p style={{fontWeight: 'bolder'}}>Booked Seat</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p>Wagon Number</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p>{data.wagonNumber}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p>Seat Number</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p>{data.seatNumber}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l4">
                <p style={{fontWeight: 'bolder'}}>Customer Information</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p>Passenger Name</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p>{data.passenger}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p>Passenger Phone Number</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p>{data.passengerNumber}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l4">
                <p style={{fontWeight: 'bolder'}}>Price Detail</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p>Adult</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p>Rp. {data.adultPrice} x {data.totalBuy} {(data.totalBuy > 1) ? <span>Passengers</span> : <span>Passenger</span>}</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p>Administration</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p>Rp. 7500</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p>Discount Price</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p>- Rp. 7500</p>
              </div>
            </div>
            <div className="row hover">
              <div className="col l3">
                <p style={{fontWeight: 'bolder'}}>Total</p>
              </div>
              <div className="col l1">
                <p>:</p>
              </div>
              <div className="col l8">
                <p><b>Rp. {data.adultPrice * data.totalBuy}</b> (NTA: Rp. 5000) </p>
              </div>
            </div>
            <div className="row">
              <div className="col m10" />
              <div className="col m2">
                <RaisedButton onClick={this.handleOpenModal} label="Confirm" primary={true} style={{marginTop: '30px'}} icon={ <FontIcon className="material-icons">check</FontIcon>} />
                <Dialog
                  title="Are you sure that all data is correct?"
                  actions={actionsModals}
                  modal={true}
                  open={this.state.openModal}
                >
                  Booking request will be send and data can't be change again.
                </Dialog>
              </div>
            </div>
          </div>
      </Card>
    )
  }
}
