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 AdultFormINTL from './AdultFormINTL';
import ChildFormINTL from './ChildFormINTL';
import BabyFormINTL from './BabyFormINTL';
@inject('appstate')
@observer
export default class FormBookINTL 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!');
    window.scrollTo(0, 0);
  }

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

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

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

  firstName = (event, value)=>{
    this.setState({
        firstNameCustomer : value
    })
  };

  lastName = (event, value)=>{
      this.setState({
          lastNameCustomer : value
      })
  };

  email = (event,value) =>{
    this.setState({
      emailCustomer : value
    })
  }

  


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

    var child = [];
    for(var y=0;y<this.props.passangerData.children;y++){
        child.push(y+1);
    }

    var baby = [];
    for(var z=0;z<this.props.passangerData.baby;z++){
        baby.push(z+1);
    }


    return (

      <div className="animated fadeIn">
              <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 Flight'}/>
                </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}  onChange={this.firstName}/>
                      </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} onChange={this.lastName}/>
                    </div>
                  </div>
                  <div className="col s12 l6">
                    <div>
                      <p className="label-form">Email</p>
                      <TextField hintText="E.g email@example.com" fullWidth={true} onChange={this.email}/>
                    </div>
                  </div>
                </div>

                </div>
              </Card>
              </div>
              {adult.map((x)=>{
                return (<AdultFormINTL no={x}/>)
              })}

              {(child.lenght != 0)?
                child.map((x)=>{
                  return (<ChildFormINTL no={x}/>)
                }) : ''
              }

              {(baby.lenght != 0)?
                baby.map((x)=>{
                  return (<BabyFormINTL no={x}/>)
                }) : ''
              }

              <div className="row">
                <Card>
                <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                <ToolbarGroup>
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Price Detail'}/>
                </ToolbarGroup>
                </Toolbar>
                
                <Divider/>
                
                <div style={{padding:'14px'}}>
                <div className="row">
                <div className="col l12">
                    <p className="header-text-mini">Depart</p>
                  </div>
                 </div>
                 <div className="row">
                    <div className="col l3">
                      <p className="passive">Adult (x{this.props.passangerData.adult})</p>
                    </div>
                    <div className="col l9" style={{textAlign:'right'}}>
                      <p>Rp. {Number(this.props.flightData.desc.price*this.props.passangerData.adult)}</p>
                    </div>
                </div>
                {(child.slice(0,1)).map(()=>{
                  return (
                       <div className="row">
                          <div className="col l3">
                            <p className="passive">Children (x{this.props.passangerData.children})</p>
                          </div>
                          <div className="col l9" style={{textAlign:'right'}}>
                            <p>Rp. {Number(this.props.flightData.desc.price*this.props.passangerData.children)}</p>
                          </div>
                      </div>
                  )
                })}
                {(baby.slice(0,1)).map(()=>{
                  return (
                       <div className="row">
                          <div className="col l3">
                            <p className="passive">Baby (x{this.props.passangerData.baby})</p>
                          </div>
                          <div className="col l9" style={{textAlign:'right'}}>
                            <p>Rp. {Number(this.props.flightData.desc.price*this.props.passangerData.baby)}</p>
                          </div>
                      </div>
                  )
                })}
                <div className="row">
                  <div className="col l12">
                    <Divider/>
                  </div>
                </div>
                 <div className="row">
                    <div className="col l3">
                      <p className="passive">Total</p>
                    </div>
                    <div className="col l9" style={{textAlign:'right'}}>
                      <p><strong>Rp. {Number(this.props.flightData.desc.price*(this.props.passangerData.adult+this.props.passangerData.children+this.props.passangerData.baby))}</strong></p>
                    </div>
                
                </div>
                <div className="row">
                  <blockquote>
                      <p style={{marginBottom :'10px'}}><strong>Booking Process</strong><br/>Make sure you are already understand terms and conditions before continue the booking process.</p>
                      <p><strong>Important Note</strong></p>
                      <ol style={{listStyleType : 'decimal'}}>
                        <li>Passenger data must be same as data in domestic ID or international password</li>
                        <li>Any kind of data mistake is not our responsibility</li>
                      </ol>
                  </blockquote>
                </div>  
                <div className="row" style={{textAlign:"right"}}>
                      <RaisedButton label="Proceed" icon={ <FontIcon className="material-icons">forward</FontIcon>} onClick={this.props.onClickProceed} primary={true}/>
                  </div>
                </div>
                
              </Card>
              </div>
              
              </div>

              <div className="col s12 l4">
                <Card>
                <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                <ToolbarGroup>
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Flight'}/>
                </ToolbarGroup>
              </Toolbar>
              <Divider/>
              <div style={{padding:'14px'}}>
              <div className="row">
                <div className="col l6">
                  <img src={`${this.props.flightData.image}`}  className="logo-maskapai"/>
                </div>
                <div className="col l6">
                  <p>Flight Code : {this.props.flightData.desc.flight}</p>
                  <p className="passive">{this.props.flightData.desc.date}</p>
                </div>
              </div>
              <div className="row">
              <div>
                 <div className="col l12">
                 <div className="row">
                   <div className="col l3 " style={{textAlign:'center'}}>
                     <p className="top-text">{this.props.flightData.desc.depature.time}</p>
                     
                   </div>
                   <div className="col l9 ">
                     <p className="top-text">{this.props.flightData.desc.depature.airport}</p>
                     <p className="passive">Bandar Udara Internasional Soekarno–Hatta</p>
                   </div>
                 </div>
                 <div className="row">
                  <div className="col l3" style={{textAlign:'center'}}>
                      <FontIcon className="material-icons rotate-vertical" style={{color:'#B7B7B7'}}>flight</FontIcon>
                  </div>
                 </div>
                 <div className="row">
                   <div className="col l3 " style={{textAlign:'center'}}>
                     <p className="top-text"> {this.props.flightData.desc.destination.time}</p>
                    
                   </div>
                   <div className="col l9 ">
                     <p className="top-text">{this.props.flightData.desc.destination.airport}</p>
                     <p className="passive">Bandar Udara Internasional Ngurah Rai</p>
                   </div>
                 </div>
                {/* <div className="row">
                  <div className="col l12">
                    <p className="header-text-mini">Depart</p>
                  </div>
                 </div>
                 <div className="row">
                    <div className="col l3">
                      <p className="passive">Total</p>
                    </div>
                    <div className="col l9" style={{textAlign:'right'}}>
                      <p>Rp. {this.props.flightData.desc.price}</p>
                    </div>
                 </div>*/}
                 
                 
                 </div>   

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