import React from 'react';
import {observer, inject} from 'mobx-react';
import bind from 'bind-decorator';
import Lightbox from 'react-images';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  AutoComplete,
  CardText,
  FlatButton,
  Divider,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  SelectField,
  MenuItem,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  RadioButton, RadioButtonGroup,DropDownMenu,
  Tabs, Tab,
  GridList, GridTile, Dialog,
  TableRow,Table,TableRowColumn,TableHeader,TableHeaderColumn,TableBody,
  Step,
  Stepper,
  StepLabel,
} 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 ArrowForwardIcon from 'material-ui/svg-icons/navigation/arrow-forward';
import moment from 'moment';
import '../style.scss';
import {appConfig} from "../../../config/app";

@inject('appstate')
@observer
export default class ScheduleForm extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {

    };
    // this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.packageService = props.appstate.packageServiceStore;
    this.packageStore = props.appstate.packages;
    this.packageSchedule = props.appstate.packageSchedules;
  }

  componentDidMount() {
    this.packageSchedule.getAvaliable(this.packageStore.packageId);
  }

  handleRowSelection = (selectedRows) =>{
    this.packageService.postData.package_schedule_id = this.packageSchedule.avaliablePax[selectedRows[0]].id;
  }

  render() {

    return(
      <div style={{
        padding: 30
      }}>
        <div className="row">
          <div className="col s12 l12">
            <p className="label-form" style={{marginBottom:20}}>Select one of following schedule</p>
            <Table selectable={true} onRowSelection={this.handleRowSelection}>
                <TableBody>
                {(this.packageSchedule.avaliablePax.map((row)=>{
                    return (
                      <TableRow className="schedule" style={{paddingLeft: 0}}>
                        <TableRowColumn>{moment(row.depature_date).format('DD[,] MMMM YYYY')} - {moment(row.return_date).format('DD[,] MMMM YYYY')}</TableRowColumn>
                        <TableRowColumn>Avaliable : {row.avaliable_pax} Pax</TableRowColumn>
                      </TableRow>
                    )
                }))}
                </TableBody>
              </Table>
          </div>
        </div>
      </div>
    );

  }

}
