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,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
} 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 WarningIcon from 'material-ui/svg-icons/alert/warning';

import '../style.scss';
import {appConfig} from "../../../config/app";

@inject('appstate')
@observer
export default class ListTrain extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      expanded : false,
      flight_detail : null,
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

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

  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:'',
      })
    }
  };


  render() {
    const listData = [
      {
        'key' : 1,
        'desc' : {
          name: 'Argo Dwipangga (10)',
          depature : {
            station:'Gambir (GMR)',
            time : '08:00'
          },
          destination : {
            station:'Yogyakarta (YK)',
            time:'15:39' 
          },
          departureDate : '22 Sep 2017',
          destinationDate : '22 Sep 2017'
          },
        seat: [
          {
            class: 'Executive Class (A)',
            adult: '450000',
            baby: '0',
            available: '31'
          },
          {
            class: 'Executive Class (M)',
            adult: '310000',
            baby: '0',
            available: '0'
          }
        ]
      },
      {
        'key' : 2,
        'desc' : {
          name: 'Taksaka (52)',
          depature : {
            station:'Gambir (GMR)',
            time : '08:30'
          },
          destination : {
              station:'Yogyakarta (YK)',
              time:'16:25'
          },
          departureDate : '22 Sep 2017',
          destinationDate : '22 Sep 2017'
          },
        seat: [
          {
            class: 'Executive Class (A)',
            adult: '430000',
            baby: '0',
            available: '265'
          },
          {
            class: 'Executive Class (M)',
            adult: '310000',
            baby: '0',
            available: '0'
          }
        ]
      },
      {
        'key' : 3,
        'desc' : {
          name: 'Bima (44)',
          depature : {
            station:'Gambir (GMR)',
            time : '16:30'
          },
          destination : {
              station:'Yogyakarta (YK)',
              time:'00:40'
            }  ,
          departureDate : '22 Sep 2017',
          destinationDate : '23 Sep 2017'
          },
        seat: [
          {
            class: 'Executive Class (A)',
            adult: '400000',
            baby: '0',
            available: '203'
          },
          {
            class: 'Executive Class (M)',
            adult: '375000',
            baby: '0',
            available: '0'
          }
        ]
      },
      {
        'key' : 4,
        'desc' : {
          name: 'Gajayana (42)',
          depature : {
            station:'Gambir (GMR)',
            time : '17:40'
          },
          destination : {
              station:'Yogyakarta (YK)',
              time:'01:47'
          } ,
          departureDate : '22 Sep 2017',
          destinationDate : '23 Sep 2017'
        },
        seat: [
          {
            class: 'Executive Class (A)',
            adult: '440000',
            baby: '0',
            available: '294'
          },
          {
            class: 'Executive Class (M)',
            adult: '375000',
            baby: '0',
            available: '0'
          }
        ]
      },
      {
        'key' : 5,
        'desc' : {
          name: 'Argo Lawu (8)',
          depature : {
            station:'Gambir (GMR)',
            time : '20:15'
          },
          destination : {
            station:'Yogyakarta (YK)',
            time:'03:48'
          },
          departureDate : '22 Sep 2017',
          destinationDate : '23 Sep 2017'
        },
        seat: [
          {
            class: 'Executive Class (A)',
            adult: '450000',
            baby: '0',
            available: '318'
          },
          {
            class: 'Executive Class (M)',
            adult: '310000',
            baby: '0',
            available: '0'
          }
        ]
      },
      {
        'key' : 6,
        'desc' : {
          name: 'Taksaka (54)',
          depature : {
            station:'Gambir (GMR)',
            time : '20:45'
          },
          destination : {
              station:'Yogyakarta (YK)',
              time:'04:15'
          },
          departureDate : '22 Sep 2017',
          destinationDate : '23 Sep 2017'        
        },
        seat: [
          {
            class: 'Executive Class (A)',
            adult: '430000',
            baby: '0',
            available: '249'
          },
          {
            class: 'Executive Class (M)',
            adult: '310000',
            baby: '0',
            available: '0'
          }
        ]
      },
    ]

    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="Find Schedule"/>
          </ToolbarGroup>
        </Toolbar>
        <Divider/>
        <div style={{padding: '14px'}}>
          <div className="row">
            <p style={{marginLeft: '25px', marginTop: '5px'}}>
              GAMBIR (GMR) - YOGYAKARTA (YK)
            </p>
          </div>
          <div className="row" style={{marginTop: '10px', marginBottom: '-10px'}}>
            <div className="col m5">
              <div className="row">
                <div className="col m6">
                  <div className="row">
                    <div className="col m2">
                      <FontIcon className="material-icons" style={{color:'#B7B7B7'}}>access_time</FontIcon>
                    </div>
                    <div className="col m10">
                      <p style={{marginTop: '5px'}}>
                        22 September 2017
                      </p>
                    </div>
                  </div>
                </div>
                <div className="col m6">
                  <div className="row">
                    <div className="col m2">
                      <FontIcon className="material-icons" style={{color:'#B7B7B7'}}>people_outline</FontIcon>
                    </div>
                    <div className="col m10">
                      <p style={{marginTop: '5px'}}>
                        Adult / Child : 1
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="col m7"></div>
          </div>
        </div>
        <Divider />
        <div>
            {(listData.slice(0, listData.length)).map(item => {
            return (
            <div>
            <div style={{padding: '20px 14px 14px 27px'}}>
                <div className="row">
                  <div className="col s12 l12">
                    <p className="detail-flight-top">{item.desc.name.toUpperCase()}</p>
                  </div>
                </div>
                <div className="row">
                  <div className="col s12 l2">
                    <p className="detail-flight-top">{item.desc.depature.time}</p>
                    <p>{item.desc.departureDate}</p>
                    <p>{item.desc.depature.station}</p>
                  </div>
                  <div className="col s12 l1">
                    <p style={{marginLeft: '-10px'}}><FontIcon className="material-icons" style={{color:'#B7B7B7', lineHeight: '50px'}}>train</FontIcon><FontIcon className="material-icons" style={{color:'#B7B7B7', lineHeight: '50px'}}>arrow_forward</FontIcon></p>
                  </div>
                  <div className="col s12 l2">
                    <p className="detail-flight-top">{item.desc.destination.time}</p>
                    <p>{item.desc.destinationDate}</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 l5">
                    {(this.state.flight_detail !== item.key) ? <RaisedButton primary={true} label="Detail" onClick={()=>this.handleFlightDetail(item.key)} style={{width: '100px'}}/> : <RaisedButton primary={false} label="Detail" onClick={()=>this.handleFlightDetail(item.key)} style={{marginRight:'10px'}}/>}
                  </div>
                </div>
                <div className="row" style={{marginTop:'20px'}}>
                  <Card expanded={this.state.expanded} onExpandChange={this.handleFlightDetail} style={{boxShadow : 'none'}}>
                    <CardText expandable={this.state.flight_detail !== item.key} className="detail-flight">
                          <Table>
                            <TableHeader style={{backgroundColor: 'rgb(232, 232, 232)'}} adjustForCheckbox={false} displaySelectAll={false}>
                              <TableRow>
                                <TableHeaderColumn><p style={{textAlign: 'center', color: '#424770'}}>Class</p></TableHeaderColumn>
                                <TableHeaderColumn><p style={{textAlign: 'center', color: '#424770'}}>Adult Price</p></TableHeaderColumn>
                                <TableHeaderColumn><p style={{textAlign: 'center', color: '#424770'}}>Baby Price</p></TableHeaderColumn>
                                <TableHeaderColumn><p style={{textAlign: 'center', color: '#424770'}}>Available</p></TableHeaderColumn>
                                <TableHeaderColumn><p style={{textAlign: 'center', color: '#424770'}}>Action</p></TableHeaderColumn>
                              </TableRow>
                            </TableHeader>
                            <TableBody displayRowCheckbox={false} showRowHover={true}>
                            {(item.seat.slice(0, listData.length)).map(items => {
                              return (
                                    <TableRow>
                                      <TableRowColumn><p style={{textAlign: 'center'}}>{items.class}</p></TableRowColumn>
                                      <TableRowColumn><p style={{textAlign: 'center'}}>Rp. {items.adult}</p></TableRowColumn>
                                      <TableRowColumn><p style={{textAlign: 'center'}}>Rp. {items.baby}</p></TableRowColumn>
                                      <TableRowColumn><p style={{textAlign: 'center'}}>{items.available}</p></TableRowColumn>
                                      <TableRowColumn>{(items.available > 0) ? <div style={{textAlign: 'center'}}><RaisedButton primary={true} onClick={this.props.onClickBuy} label="Choose" /></div> : <p style={{color: '#F44336', textAlign: 'center'}}>N/A</p>}</TableRowColumn>
                                    </TableRow>
                              );
                            })}
                            </TableBody>
                          </Table>
                    </CardText>
                  </Card>
                </div>
            </div>
            <Divider/>
          </div>
          )
          })}
        </div>
      </Card>
    )
  }
}
