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

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

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

  handlePriceDetail = (key)=>{
    

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

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

  render() {

    const listData = [
      {
        'key' : 1,
        'image' : '/assets/images/BRT.jpg',
      'desc' : {
          bus: 'JT902',
          depature : {
            station:'Bandung - Buah Batu',
            time : '07.15'
          },
          destination : {
            station:'Jakarta - Kelapa Gading',
            time:'10.00' 
          },
          date : '24 Sep 2017',
          
          'class' : 'Eksekutif',
          'price' : '150,000'
          },
      },
      {
        'key' : 2,
        'image' : '/assets/images/BRT.jpg',
      'desc' : {
          bus: 'JT922',
          depature : {
            station:'Bandung - Cimareme',
            time : '12.00'
          },
          destination : {
              station:'Jakarta - Karawaci',
              time:'14.00'
          },
          date : '28 Sep 2017',
          
          'class' : 'economic',
          'price' : '60.000'
          },
      },
      {
        'key' : 3,
        'image' : '/assets/images/bt.jpg',
      'desc' : {
          bus: 'JA902',
          depature : {
            station:'Bandung - Cimareme',
            time : '09.00'
          },
          destination : {
              station:'Jakarta - Kelapa Gading',
              time:'11.00'
            }  ,
          date : '21 Sep 2017',
          
          'class' : 'Eksekutif',
          'price' : '100,000'
          },
      },
      {
        'key' : 4,
        'image' : '/assets/images/bt.jpg',
      'desc' : {
        bus: 'JT902',
        depature : {
          station:'Jakarta - Tomang',
          time : '10:00'
        },
        destination : {
            station:'Bandung - Surapati 1',
            time:'12.00'
         } ,
        date : '25 Sep 2017',
        'class' : 'Eksekutif ',
        'price' : '150,000'
      },
    },
  ]



  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 => {
        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.bus}</p>
              </div>
              <div className="col s12 l1">
                <p><FontIcon className="material-icons" style={{color:'#B7B7B7'}}>directions_bus</FontIcon></p>
              </div>
              <div className="col s12 l2">
                <p className="detail-flight-top">{item.desc.destination.time}</p>
                <p>{item.desc.destination.station}</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. {item.desc.price}</p>
                <p><RaisedButton primary={true} label='Choose' onClick={()=>this.submit(item)}/></p>
              </div>
            </div>
            <div className="row">
              <Card expanded={this.state.expanded} onExpandChange={this.handleBusDetail} style={{boxShadow : 'none',height:'30px'}}>
                <CardText>
                    <FlatButton primary={true} label="Bus Detail" onClick={()=>this.handleBusDetail(item.key)} style={{marginRight:'10px',color:(this.state.bus_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.bus_detail !== item.key} className="detail-flight">
                    <div className="row">
                      <div className="col l3">
                      <img src={`${item.image}`}  style={{width:'50%'}}/>
                      <p className="flight-code">Bus Code : {item.desc.bus}</p>
                      <p className="passive">{item.desc.date}</p>
                      </div>
                      <div className="col l6">
                          <div className="col l1" style={{textAlign:'center'}}>
                          <div className="row">
                          <FontIcon className="material-icons" style={{color : '#8f8f8f'}}>radio_button_unchecked</FontIcon>
                          </div>
                          <div className="row" style={{width:'1px',height:'50px',border:'1px solid #8f8f8f', backgroundColor:'#8f8f8f'}}>
                          </div>
                          <div className="row">
                          <FontIcon className="material-icons" style={{color : '#8f8f8f'}}>radio_button_checked</FontIcon>
                          </div>
                          </div>
                          <div className="col l11">
                          <div className="row">
                            <div className="col l2 ">
                              <p className="top-text">{item.desc.depature.time}</p>
                              
                            </div>
                            <div className="col l10 ">
                              <p className="top-text">{item.desc.depature.station}</p>
                            </div>
                          </div>
                          <div className="row">
                            <div className="col 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 l2 ">
                            <p className="top-text">{item.desc.destination.time}</p>
                            </div>
                            <div className="col l10 ">
                              <p className="top-text">{item.desc.destination.station}</p>
                            </div>
                          </div>
                          </div>
                      </div>
                      <div className="col l3">
                        <p className="facility"><span className="passive">Facility : </span>Reclining Seat,AC,Water,</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 l8 ">
                        <p className="top-text">Basic Fare (1x Passanger)</p>
                      </div>
                      <div className="col l4 ">
                        <p className="top-text">Rp. {item.desc.price}</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. {item.desc.price}</strong></p>
                  </div>
                </div>
                  </div>
                </div>
              </div>
                </CardText>
              </Card>
            </div>
        </div>
        <Divider/>
      </div>
      )
      })}
        </Card>
        </div>
      </div>

  )
  }
}
