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,
} 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 moment from 'moment';

@inject('appstate')
@observer
export default class ListAirlinesINTL extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      expanded : false,
      flight_detail : null,
      price_detail:null,
      flight : null
    };
    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);

  }

  handleFlightDetail = (key)=>{
    if(key == this.state.flight_detail){
      this.setState({
        flight_detail : 'x-0!',
        price_detail:'',
      })  
    }
    else if(this.state.flight_detail == null){
        this.setState({
        flight_detail : key,
        price_detail:'',
      })
    }
    else{
      
      this.setState({
        flight_detail : key,
        price_detail:'',
      })
    }
  };

  handlePriceDetail = (key)=>{
    

    if(key == this.state.price_detail){
      this.setState({
        price_detail : 'x-0!',
        flight_detail:'',
      })  
    }
    else if(this.state.price_detail == null){
        this.setState({
        price_detail : key,
        flight_detail:'',
      })
    }
    else{
      
      this.setState({
        price_detail : key,
        flight_detail:'',
      })
    }
  };


  submit = (key) =>{
    this.props.onClickSubmit(key);
  }




  render() {

  const listData = [
      {
      'key' : 1,
      'image' : 'http://akuntiket.com/img/img-airline/logo_qz.png',
      'desc' : {
          flight: 'JT902',
          depature : {
            airport:'Jakarta (CGK)',
            time : '16:00'
          },
          destination : {
            airport:'Singapore (SIN)',
            time:'19.50' 
          },
          date : '22 Sep 2017',
          
          'class' : 'H( 7 )',
          'price' : '2275000'
          },
      },
      {
      'key' : 2,
      'image' : 'http://akuntiket.com/img/img-airline/logo_qz.png',
      'desc' : {
          flight: 'JT922',
          depature : {
            airport:'Jakarta (CGK)',
            time : '16:00'
          },
          destination : {
              airport:'Singapore (SIN)',
              time:'19.50'
          },
          date : '22 Sep 2017',
          
          'class' : 'L( 17 )',
          'price' : '3475000'
          },
      },
      {
        'key' : 3,
      'image' : 'http://akuntiket.com/img/img-airline/logo_qz.png',
      'desc' : {
          flight: 'JA902',
          depature : {
            airport:'Jakarta (CGK)',
            time : '16:00'
          },
          destination : {
              airport:'Singapore (SIN)',
              time:'19.50'
            }  ,
          date : '22 Sep 2017',
          
          'class' : 'C( 8 )',
          'price' : '1225000'
          },
      },
      {
        'key' : 4,
      'image' : 'http://akuntiket.com/img/img-airline/logo_ga.png',
      'desc' : {
        flight: 'JT902',
        depature : {
          airport:'Jakarta (CGK)',
          time : '16:00'
        },
        destination : {
            airport:'Singapore (SIN)',
            time:'19.50'
         } ,
        date : '22 Sep 2017',
        'class' : 'B( 7 )',
        'price' : '5175000'
      },
        
      },
      {
        'key' : 5,
      'image' : 'http://akuntiket.com/img/img-airline/logo_ga.png',
      'desc' : {
        flight: 'JT902',
        depature : {
          airport:'Jakarta (CGK)',
          time : '16:00'
        },
        destination : {
            airport:'Singapore (SIN)',
            time:'19.50'
        },
        date : '22 Sep 2017',
        'class' : 'A( 7 )',
        'price' : '3375000'
        
        }
      },
      {
        'key' : 6,
      'image' : 'http://akuntiket.com/img/img-airline/logo_ga.png',
      'desc' : {
        flight: 'JT902',
        depature : {
          airport:'Jakarta (CGK)',
          time : '16:00'
        },
        destination : {
            airport:'Singapore (SIN)',
            time:'19.50'
         } ,
        date : '22 Sep 2017',
        
        'class' : 'C( 7 )',
        'price' : '4275000'
        }
      },
      {
        'key' : 7,
      'image' : 'http://akuntiket.com/img/img-airline/logo_mh.png',
      'desc' : {
          flight: 'JT902',
          depature : {
            airport:'Jakarta (CGK)',
            time : '16:00'
          },
          destination : {
              airport:'Singapore (SIN)',
              time:'19.50'
            }  ,
          date : '22 Sep 2017',
          
          'class' : 'C( 9 )',
          'price' : '2300000'
          }
      },
      {
        'key' : 8,
      'image' : 'http://akuntiket.com/img/img-airline/logo_mh.png',
      'desc' : {
          flight: 'AT902',
          depature : {
            airport:'Jakarta (CGK)',
            time : '16:00'
          },
          destination : {
              airport:'Singapore (SIN)',
              time:'19.50'
            
          },
          date : '22 Sep 2017',
          'class' : 'C( 9 )',
          
          'price' : '2430000'
          }
      },
      {
        'key' : 9,
      'image' : 'http://akuntiket.com/img/img-airline/logo_mh.png',
      'desc' : {
          flight: 'JT902',
          depature : {
            airport:'Jakarta (CGK)',
            time : '16:00'
          },
          destination : {
              airport:'Singapore (SIN)',
              time:'19.50'
          },
          date : '22 Sep 2017',
          'class' : 'X( 9 )',
          'price' : '1122000'
          
          }
      },
      
    ]

    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 l12 left-panel">
                <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={'Find Schedule'}/>
                </ToolbarGroup>
              </Toolbar>
              <Divider/>
              {(listData.slice(0, listData.length)).map(item => {
                var totalPrice = Number(item.desc.price * (this.props.passangerData.adult+this.props.passangerData.baby+this.props.passangerData.children));
              return (
              <div>
              <div style={{padding: '50px 14px 14px 14px'}}>
                  <div className="row">
                    <div className="col s12 l2">
                      <img src={`${item.image}`}  className="logo-maskapai"/>
                    </div>
                    <div className="col s12 l2">
                      <p className="detail-flight-top">{item.desc.depature.time}</p>
                      <p>{item.desc.depature.airport}</p>
                    </div>
                    <div className="col s12 l1">
                      <p><FontIcon className="material-icons rotate-right" style={{color:'#B7B7B7'}}>flight</FontIcon></p>
                    </div>
                    <div className="col s12 l2">
                      <p className="detail-flight-top">{item.desc.destination.time}</p>
                      <p>{item.desc.destination.airport}</p>
                    </div>
                    <div className="col s12 l2">
                      <p className="detail-flight-top">3h 50m</p>
                      <p>Direct</p>
                    </div>
                    <div className="col s12 l3">
                      <p className="detail-flight-fare">Rp. {totalPrice}</p>
                      <p><RaisedButton primary={true} label='Choose' onClick={()=>this.submit(item)}/></p>
                    </div>
                  </div>
                  <div className="row">
                    <Card expanded={this.state.expanded} onExpandChange={this.handleFlightDetail} style={{boxShadow : 'none',height:'30px'}}>
                      <CardText>
                          <FlatButton primary={true} label="Flight Detail" onClick={()=>this.handleFlightDetail(item.key)} style={{marginRight:'10px',color:(this.state.flight_detail !== item.key)?'':'#6772e5'}}/>   
                          <FlatButton primary={true} label="Price Detail" onClick={()=>this.handlePriceDetail(item.key)} style={{marginRight:'10px',color:(this.state.price_detail !== item.key)?'':'#6772e5'}} />   
                      </CardText>
                      <CardText expandable={this.state.flight_detail !== item.key} className="detail-flight">
                          <div className="row">
                            <div className="col l3">
                            <img src={`${item.image}`}  style={{width:'50%'}}/>
                            <p className="flight-code">Flight Code : {item.desc.flight}</p>
                            <p className="passive">{item.desc.date}</p>
                            </div>
                                                        <div className="col l6">
                                <div className="col l12">
                                <div className="row">
                                  <div className="col l1">
                                    <FontIcon className="material-icons" style={{color : '#8f8f8f'}}>radio_button_unchecked</FontIcon>
                                  </div>
                                  <div className="col l2 ">
                                    <p className="top-text">{item.desc.depature.time}</p>
                                    
                                  </div>
                                  <div className="col l9 ">
                                    <p className="top-text">{item.desc.depature.airport}</p>
                                    <p className="passive">Soekarno–Hatta Internasional Airport</p>
                                  </div>
                                </div>
                                <div className="row">
                                  <div className="col offset-l1 l12">
                                <p className="passive"><FontIcon className="material-icons" style={{color:'#B7B7B7'}}>timer</FontIcon><span className="duration">3h 50m</span></p>
                                  </div>
                                </div>
                                <div className="row">
                                  <div className="col l1">
                                    <FontIcon className="material-icons" style={{color : '#8f8f8f'}}>radio_button_checked</FontIcon>
                                  </div>
                                  <div className="col l2 ">
                                    <p className="top-text"> {item.desc.destination.time}</p>
                                   
                                  </div>
                                  <div className="col l9 ">
                                    <p className="top-text">{item.desc.destination.airport}</p>
                                    <p className="passive">Singapore Changi international airport</p>
                                  </div>
                                </div>
                                </div>
                            </div>
                            <div className="col l3">
                              <p className="facility"><span className="passive">Cabin : </span>Economy</p>
                              <p className="facility"><span className="passive">Food : </span>Yes</p>
                              <p className="facility"><span className="passive">Baggage : </span>20kg</p>

                            </div>
                          </div>
                      </CardText>
                      <CardText expandable={this.state.price_detail !== item.key}>
                      <div className="row">
                      <div className="col l3">
                      <img src={`${item.image}`}  style={{width:'50%'}}/>
                      <p className="passive">Refund Avaliability is Subject to Airlines Policy</p>
                      </div>
                      <div className="col l2">
                      </div>
                      <div className="col l7">
                          <div className="col l12">
                          <div className="row">
                          <div className="col l12">
                              <p className="header-text-mini">Depart</p>
                            </div>
                           </div>
                          <div className="row">
                            <div className="col l8 ">
                              <p className="top-text">Adult (x{this.props.passangerData.adult})</p>
                            </div>
                            <div className="col l4 ">
                              <p className="top-text">Rp. {Number(item.desc.price*this.props.passangerData.adult)}</p>
                            </div>
                          </div>
                          {(child.slice(0,1)).map(()=>{
                            return (
                                 <div className="row">
                                  <div className="col l8 ">
                                    <p className="top-text">Children (x{this.props.passangerData.children})</p>
                                  </div>
                                  <div className="col l4 ">
                                    <p className="top-text">Rp. {Number(item.desc.price*this.props.passangerData.children)}</p>
                                  </div>
                                </div>
                            )
                          })}
                          {(baby.slice(0,1)).map(()=>{
                            return (
                                 <div className="row">
                                  <div className="col l8 ">
                                    <p className="top-text">Baby (x{this.props.passangerData.baby})</p>
                                  </div>
                                  <div className="col l4 ">
                                    <p className="top-text">Rp. {Number(item.desc.price*this.props.passangerData.baby)}</p>
                                  </div>
                                </div>
                            )
                          })}
                          <div className="row passive">
                          <div className="col l8 ">
                            <p className="top-text">Taxs</p>
                          </div>
                          <div className="col l4 ">
                            <p className="top-text">Included</p>
                          </div>
                        </div>
                        <div className="row">
                          <Divider/>
                        </div>
                        <div className="row">
                        <div className="col l8 ">
                          <p className="top-text">Total</p>
                        </div>
                        <div className="col l4 ">
                          <p className="top-text"><strong>Rp. {Number(item.desc.price*(this.props.passangerData.adult + this.props.passangerData.children + this.props.passangerData.baby))}</strong></p>
                        </div>
                      </div>
                        </div>
                      </div>
                    </div>
                      </CardText>
                    </Card>
                  </div>
              </div>
              <Divider/>
            </div>
            )
            })}
              </Card>
              </div>
            </div>
      
    )
  }
}
