import React from 'react';
import {inject, observer} from 'mobx-react';
import {
  Card,
  Dialog,
  Divider,
  FlatButton,
  FontIcon,
  RaisedButton,
  Step,
  StepLabel,
  Stepper,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  Toolbar,
  ToolbarGroup,
  ToolbarTitle,
} from 'material-ui';
import get from 'lodash.get';

import '../style.scss';

@inject('appstate')
@observer
export default class Review extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      openModal: false,
      reviewData: {}
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.airlinesDomesticStore = props.appstate.airlinesDomestic;
    this.airlinesDomestic = props.appstate.airlinesDomestic;
    this.globalUI = props.appstate.globalUI;
    this.flightData = {
      desc: {
        departure: {},
        destination: {}
      }
    }
    this.passangerData = {
      adult: 1,
      children: 0,
      baby: 0
    }

    this.airlinesDomestic = props.appstate.airlinesDomestic;
    this.orderStore = props.appstate.order;
  }

  componentDidMount() {
    console.log('Profile loaded!');
    window.scrollTo(0, 0);
    // console.log(this.props);
    this.airlinesDomestic.getAllAirlines();
    this.orderStore.getAirlineDetail(this.props.match.params.id)
      .then(res => {
        this.setState({
          reviewData: res
        })
      })
  }

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

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


  getAirlineImage(airlineCode) {
    if (airlineCode !== 'multi') {
      return (this.airlinesDomestic.lists.find((value, index) => {
        if (airlineCode == value.code) {
          return true;
        }
      }) || {}).image_path
    } else {
      return '/assets/images/airlines/multi.png';
    }
  }


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

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

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

    var passengerData = [{
      key: '1',
      title: 'MR',
      firstName: 'Syahrul',
      lastName: 'Maulana',
      category: 'A',
      phoneNumber: '081231212123',
      dob: '1987-07-11',
    },
      {
        key: '2',
        title: 'MS',
        firstName: 'Puspa',
        lastName: 'Maharani',
        category: 'A',
        phoneNumber: '08123365343',
        dob: '1990-02-02',
      },
      {
        key: '3',
        title: 'MSTR',
        firstName: 'Michael',
        lastName: 'Nurullah',
        category: 'A',
        phoneNumber: '084343253412',
        dob: '1997-07-11',
      },];

    var customerData = [{
      'name': 'Muhammad Badrul',
      'phoneNumber': '08129381293',
      'email': 'muha@mad.com',
      'booking_date': '2017-09-09',
    }]

    const actionsModals = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleCloseModal}
      />,
      <FlatButton
        label="Ok"
        primary={true}
        onClick={() => {
          this.orderStore.payAirlineTicket().then(() => {
            // this.props.history.push('/app/service/airlines');
            this.globalUI.openSnackbar('Booking success');
          });
        }}
      />,
    ];

    const {reviewData} = this.state;
    const selectedDepartureFlight = get(reviewData, 'request_data.selectedDepartureFlight', {});
    const selectedReturningFlight = get(reviewData, 'request_data.selectedReturningFlight', {});
    
    const departureFlights = get(selectedDepartureFlight, 'flights', []);
    
    const bookedFlights = get(reviewData, 'retrieve.flights', []);

    return (
      <div className="row">
        <div className="col l12 m12 s12">
          <Card className="animated fadeIn cardLite" style={{background: 'rgb(43, 57, 145)', marginBottom: 20}}>
            <div style={{width: '100%', margin: 'auto'}}>
              {(this.airlinesDomestic.isReturn) ? (<Stepper activeStep={2}>
                <Step>
                  <StepLabel style={{color: "white"}}>Select Departure Flight Schedule</StepLabel>
                </Step>
                <Step>
                  <StepLabel style={{color: "white"}}>Select Return Flight Schedule</StepLabel>
                </Step>
                <Step>
                  <StepLabel style={{color: "white"}}>Passengers Information & Booking</StepLabel>
                </Step>
                <Step>
                  <StepLabel style={{color: "white"}}>Payment & Issued Ticket</StepLabel>
                </Step>
              </Stepper>) : (<Stepper activeStep={2}>
                <Step>
                  <StepLabel style={{color: "white"}}>Select Departure Flight Schedule</StepLabel>
                </Step>
                <Step>
                  <StepLabel style={{color: "white"}}>Passengers Information & Booking</StepLabel>
                </Step>
                <Step>
                  <StepLabel style={{color: "white"}}>Payment & Issued Ticket</StepLabel>
                </Step>
              </Stepper>)}
            </div>
          </Card>
        </div>
        <div className="col l12 m12 s12">
          <Card className="animated fadeIn cardLite">
            <div className="col s12 l12">
              <Card className="animated fadeIn  card-booking no-shadow" style={{margin: '22px 12px 10px 12px '}}>
                <div style={{padding: "16px 24px"}}>
                  <h3 className="" style={{fontSize: "14px", marginBottom: 12}}>Booking
                    Information</h3>
                  <div className="flex booking-code">
                    <h3 className="no-margin booking-code-key">Booking code</h3>
                    <h3 className="no-margin">{get(reviewData, 'retrieve.bookingcode', '-')}</h3></div>
                  <div className="flex booking-code">
                    <h3 className="no-margin booking-code-key">Status</h3>
                    <h3 className="no-margin">{get(reviewData, 'retrieve.status', '-')}</h3></div>
                  <div className="flex booking-code">
                    <h3 className="no-margin booking-code-key">Time Limit</h3>
                    <h3 className="no-margin">{(get(reviewData, 'retrieve.timelimit', false) ? moment(reviewData.retrieve.timelimit, 'DD-MMM-YY, HH:mm').format('DD MMMM YYYY HH:mm') : '-')}</h3>
                  </div>
                  <h3 className="" style={{fontSize: "12px", marginBottom: 0, marginTop: 8, fontWeight: 500}}><FontIcon
                    className="material-icons"
                    style={{
                      verticalAlign: " sub",
                      marginRight: "4px",
                      fontSize: 14,
                      color: '#000'
                    }}>info_outline</FontIcon>Booked by <span style={{fontWeight: 600, letterSpacing: '0.5px'}}>{get(reviewData, 'retrieve.paxcontact.firstname')} {get(reviewData, 'retrieve.paxcontact.lastname')}</span>
                  </h3>

                </div>
              </Card>
            </div>

            <div className="col s12 l12">
              <Card className=" no-shadow" style={{position: "relative",}}>
                <div className="row row-departure-review" style={{marginBottom: 10}}>
                  <div className="col s12 l12 mt-20">

                    <div className="col s12 l12">
                      <span className="trip-time">Total Time: {selectedDepartureFlight.durationhour}h {selectedDepartureFlight.durationminute}m </span>
                    </div>
                    <div className="leg-type clearfix">
                      <span className="review-title gray">Departure</span>
                    </div>

                    <div className="sector-details">
                      
                      {(bookedFlights.length > 1 && (
                        <section className="layover-seprator"></section>
                      ))}

                      {departureFlights
                        .map((f, i) => {
                          
                          const bookedFlight = bookedFlights.find(fl => fl.flightno === f.flightno);
                          
                          const selectedClass = f.classes.find(c => c.code === bookedFlight.classcode);

                          // console.log(f.classcode);

                          return [
                            <article className="row review-article">
                              <div className="align-center col s2 l2 text-xs-left sm-gutter-bottom">
                                <div>
                                <img
                                  size="35"
                                  src={(selectedDepartureFlight.no_of_flight - 1 === 0) ? this.getAirlineImage(f.airlinecode) : this.getAirlineImage('multi')}
                                  className="img-airlinesbook"/><br className="hidden-xs-down"/>
                                <span className="ib fs-12 gray">
                                  {f.airline}
                                  <br/>
                                  <span className="fs-xs gray-light">{f.flightno}</span>
                                  <p className="font-12 gray-dark block font-bold">{f.classes[0].baggagekilos} kg</p>
                                </span>
                                </div>
                              </div>

                              <div className="col s10 l10 bdr bdr-left">
                                <div className="row">
                                  <div className="col s6 m2 l2" style={{marginTop: 20}}>
                                    <p className="fs-base">{f.fromcity_long}</p>
                                    <h3 className="fs-24 lh28 bold gray-dark">{f.departtime}</h3>
                                    <p className="fs-sm gray">
                                      <span className="font-bold">{f.departdate}</span>
                                      <br/>
                                      <span className="gray-light">
                                        {f.fromcity_airport}
                                      </span>
                                    </p>
                                  </div>

                                  <div 
                                    className="col s12 text-center m8 l8 sm-gutter-top"
                                    style={{marginTop: 30}}>

                                    <div className="fs-13 flex" style={{justifyContent: "center"}}>
                                      <FontIcon 
                                        className="material-icons"
                                        style={{fontSize: '18px', lineHeight: "14px"}}>
                                        schedule
                                      </FontIcon>
                                      &nbsp; {f.durationhour}h {f.durationminute}m &nbsp;
                                    </div>

                                    <div className="hide-on-small-only two-dots">
                                      <FontIcon 
                                        className="material-icons rotate-right"
                                        style={{color: '#B7B7B7', top: '-12px'}}>
                                        flight
                                      </FontIcon>
                                    </div>
                                    <div className="fs-13 flex" style={{justifyContent: "center"}}>
                                      {bookedFlight.classcode} - {get(selectedClass, 'fare')} - {get(selectedClass, 'cabin')}
                                    </div>
                                  </div>

                                  <div className="col s6 m2 l2 align-right sm-border-left" style={{marginTop: 20}}>
                                    <p className="fs-base">{f.tocity_long}</p>
                                    <h3 className="fs-24 lh28 bold gray-dark">{f.arrivetime}</h3>
                                    <p className="fs-sm gray">
                                    <span className="font-bold">{moment(f.arrivaldate, 'DD-MMM-YYYY').format("ddd, DD MMMM YYYY")}</span>
                                      <br/>
                                      <span className="gray-light">
                                        {f.tocity_airport}
                                      </span>
                                    </p>
                                  </div>
                                </div>
                              </div>
                            </article>,

                            (i > 0 && (
                              <div className="text-center row ">
                                <div className="col m2 l2"></div>
                                <div className="box-condensed pr col m10 l10 padd-none">
                                  <div className="block fs-sm msg-bar">
                                    <FontIcon 
                                      className="material-icons"
                                      style={{
                                        top: "2px",
                                        marginRight: "2px",
                                        fontSize: 14
                                      }}>info_outline
                                      </FontIcon>
        
                                      Change planes at
        
                                    <span className="font-bold"> Jakarta cgk</span>, 
                                    Connecting Time:
                                    <span className="font-bold"> 5h 4m </span> 
                                    | Flight may depart from a different terminal
                                  </div>
                                </div>
                              </div>
                            ))

                          ]
                        })}

                    </div>
                  </div>
                </div>
              </Card>
            </div>

            {/*<div className="col s12 l12">*/}
            {/*{this.airlinesDomestic.selectedDepartureFlight.flights.map(flight => {*/}
            {/*return (<Card className=" animated fadeIn cardLite" style={{marginBottom: 10}}>*/}
            {/*<div style={{padding: '14px'}}>*/}
            {/*<div className=" row detail-flight">*/}
            {/*<div className=" col s12 l12 mt-20">*/}
            {/*<span*/}
            {/*className=" trip-time">Total Time: {this.data.durationhour}h {this.data.durationminute}m </span>*/}
            {/*<div className=" leg-type clearfix">*/}
            {/*<span className=" review-title gray">Departure</span>*/}
            {/*</div>*/}
            {/*</div>*/}
            {/*<div className=" col l3">*/}
            {/*<img*/}
            {/*src={(this.airlinesDomestic.selectedDepartureFlight.no_of_flight - 1 === 0) ? this.getAirlineImage(this.airlinesDomestic.selectedDepartureFlight.airlinecode) : this.getAirlineImage('multi')}*/}
            {/*style={{width: '50%'}}/>*/}
            {/*<p className=" flight-code">Flight Code : {flight.flightno}</p>*/}
            {/*<p className=" passive">{flight.departdate}</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">{flight.departdate} - {flight.departtime}</p>*/}

            {/*</div>*/}
            {/*<div className=" col l9 ">*/}
            {/*<p className=" top-text">{flight.fromcity}</p>*/}
            {/*<p className=" passive">{flight.fromcity_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">{flight.durationhour}h {flight.durationminute}m</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"> {flight.arrivaldate} - {flight.arrivetime}</p>*/}

            {/*</div>*/}
            {/*<div className=" col l9 ">*/}
            {/*<p className=" top-text">{flight.tocity}</p>*/}
            {/*<p className=" passive">{flight.tocity_airport}</p>*/}
            {/*</div>*/}
            {/*</div>*/}
            {/*</div>*/}
            {/*</div>*/}
            {/*<div className=" col l3">*/}
            {/*<p className=" facility"><span*/}
            {/*className=" passive">Cabin : </span>{flight.selected_class}*/}
            {/*- {flight.classes.find(it => it.code === flight.selected_class).cabin}*/}
            {/*</p>*/}
            {/*<p className=" facility"><span className=" passive">Food : </span>Yes</p>*/}
            {/*<p className=" facility"><span className=" passive">Baggage : </span>20kg</p>*/}
            {/*</div>*/}
            {/*</div>*/}
            {/*</div>*/}
            {/*</Card>)*/}
            {/*})}*/}

            {/*</div>*/}

            <div className="row" style={{marginBottom: 0}}>
              <div className="col l12">

                <Card className="animated fadeIn no-shadow" style={{marginBottom: 10}}>
                  <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                    <ToolbarGroup>
                      <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Customer Data'}/>
                    </ToolbarGroup>
                  </Toolbar>

                  <div style={{padding: '14px'}}>
                    <div className="row">
                      <Table selectable={false}
                             headerStyle={{border: '1px solid rgb(140, 140, 140)', borderBottom: 'none'}}>
                        <TableHeader displaySelectAll={false} adjustForCheckbox={false}
                                     style={{borderColor: "rgb(140, 140, 140)"}}>
                          <TableRow displayBorder={true} style={{borderColor: "rgb(140, 140, 140)"}}>
                            <TableHeaderColumn>No</TableHeaderColumn>
                            <TableHeaderColumn>Full Name</TableHeaderColumn>
                            <TableHeaderColumn>Phone Number</TableHeaderColumn>
                            <TableHeaderColumn>Email</TableHeaderColumn>
                            <TableHeaderColumn>Booking Date</TableHeaderColumn>
                          </TableRow>
                        </TableHeader>
                        <TableBody displayRowCheckbox={false} showRowHover={false}>
                          <TableRow 
                            displayBorder={true} 
                            hoverable={false}
                            style={{border: '1px solid rgb(140, 140, 140)', borderTop: 'none'}}>
                              <TableRowColumn>1</TableRowColumn>
                              <TableRowColumn>{'-'}</TableRowColumn>
                              <TableRowColumn>{'-'}</TableRowColumn>
                              <TableRowColumn>{'-'}</TableRowColumn>
                              <TableRowColumn>{'-'}</TableRowColumn>
                            </TableRow>
                        </TableBody>
                      </Table>
                    </div>
                  </div>
                </Card>

                <Card className="animated fadeIn no-shadow" style={{marginBottom: 0}}>
                  <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                    <ToolbarGroup>
                      <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Passenger Data'}/>
                    </ToolbarGroup>
                  </Toolbar>

                  <div style={{padding: '14px'}}>
                    <Table headerStyle={{border: '1px solid rgb(140, 140, 140)', borderBottom: 'none'}}>
                      <TableHeader 
                        displaySelectAll={false} 
                        adjustForCheckbox={false}
                        style={{borderColor: "rgb(140, 140, 140)"}}>
                        <TableRow style={{borderColor: "rgb(140, 140, 140)"}}>
                          <TableHeaderColumn>No</TableHeaderColumn>
                          <TableHeaderColumn>Category</TableHeaderColumn>
                          <TableHeaderColumn>Title</TableHeaderColumn>
                          <TableHeaderColumn>Name</TableHeaderColumn>
                          <TableHeaderColumn>Phone Number</TableHeaderColumn>
                          <TableHeaderColumn>ID Number</TableHeaderColumn>
                        </TableRow>
                      </TableHeader>
                      <TableBody displayRowCheckbox={false} showRowHover={false}>
                        {get(reviewData, 'retrieve.pax', []).map((row, index) => {
                          return (
                            <TableRow 
                              hoverable={false}
                              style={{border: '1px solid rgb(140, 140, 140)', borderTop: 'none'}}>

                              <TableRowColumn>{(index + 1)}</TableRowColumn>
                              <TableRowColumn>{'Adult'}</TableRowColumn>
                              <TableRowColumn>Mr.</TableRowColumn>
                              <TableRowColumn>{row.name}</TableRowColumn>
                              <TableRowColumn>{'-'}</TableRowColumn>
                              <TableRowColumn>{'-'}</TableRowColumn>

                            </TableRow>
                          )
                        })}
                      </TableBody>
                    </Table>
                  </div>
                </Card>

                <div className="row" style={{marginBottom: 0}}>
                  <div className="col l12">
                    <Card className="animated fadeIn no-shadow" style={{marginBottom: 10}}>
                      <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                        <ToolbarGroup>
                          <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}}
                                        text={'Price Detail'}/>
                        </ToolbarGroup>
                      </Toolbar>

                      <div style={{padding: '14px', marginTop: 20}}>
                        <div className=" row">
                          <div className=" col l3">
                            <p className=" passive">Adult (x{this.airlinesDomestic.queries.adult})</p>
                          </div>
                          <div className=" col l9" style={{textAlign: 'right'}}>
                            <p>Rp. {Number(this.airlinesDomestic.totalForAdult)}</p>
                          </div>
                        </div>
                        <div className=" row">
                          <div className=" col l3">
                            <p className=" passive">Service Charge</p>
                          </div>
                          <div className=" col l9" style={{textAlign: 'right'}}>
                            <p>Rp. {Number(this.airlinesDomestic.totalForAdult)}</p>
                          </div>
                        </div>
                        <div className=" row">
                          <div className=" col l12">
                            <Divider/>
                          </div>
                        </div>
                        <div className=" row">
                          <div className="col l3">
                            <h1 className="">You Pay</h1>
                          </div>
                          <div className=" col l9" style={{textAlign: 'right'}}>
                            <p><strong>Rp. {Number(this.airlinesDomestic.totalForAdult)}</strong></p>
                          </div>
                        </div>

                        <div className=" row">
                          <blockquote>
                            <p className=" no-margin"><strong style={{letterSpacing: "0.2px"}}><FontIcon
                              className=" material-icons"
                              style={{
                                verticalAlign: " sub",
                                marginRight: "2px",
                                fontSize: 14,
                                color: '#000'
                              }}>info_outline</FontIcon> Booking Process</strong><br/>Make
                              sure you are already
                              understand terms and conditions before continue the booking process.</p>
                            <p className=" no-margin"><strong style={{letterSpacing: "0.2px"}}><FontIcon
                              className=" material-icons"
                              style={{
                                verticalAlign: " sub",
                                marginRight: "2px",
                                fontSize: 14,
                                color: '#000'
                              }}>info_outline</FontIcon> Important Note</strong></p>
                            <ol style={{listStyleType: 'decimal', margin: 0}}>
                              <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>
                    </Card>
                  </div>
                </div>

                <div className="row" style={{textAlign: "right", marginTop: 20, marginBottom: 30, marginRight: 20}}>
                  <RaisedButton style={{marginRight: 20}} label=" Print"
                                icon={<FontIcon className="material-icons">print</FontIcon>}
                                onClick={this.handleOpenModal} primary={true}/>
                  <RaisedButton style={{marginRight: 20}} label=" Email"
                                icon={<FontIcon className="material-icons">mail</FontIcon>}
                                onClick={this.handleOpenModal} primary={true}/>
                  <RaisedButton label=" Issued" icon={<FontIcon className="material-icons">check</FontIcon>}
                                onClick={this.handleOpenModal} primary={true}/>
                  <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>
        </div>
      </div>
    )
  }
}
