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, DropDownMenu,
  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 FormAirlinesINTL from "./FormAirlinesINTL";
import ListAirlinesINTL from "./ListAirlinesINTL";
import FormBookINTL from './FormBookINTL';
import ReviewINTL from './ReviewINTL';
import SnackbarMessage from '../SnackbarMessage';

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

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

  }

  handleClickFind = () => {
    this.setState({
      value: 1
    })
  };

  handleClickBack = () => {
    this.setState({
      value: 0
    })
  };

  handleClickProceed = () => {
    this.setState({
      value: 3
    })
  }

  handleBackForm = () => {
    this.setState({
      value: 1
    })
  };

  handleChooseFlight = (flight) => {
    this.setState({
      value: 2,
      flightData: flight,
    })
    console.log(flight);
  };

  getData = (object) => {
    this.setState({
      passangerData: object
    })
    console.log(object);
  };

  handleBookNow = () => {
    this.setState({
      value: 0,
      openSnackbar: true,
    })
  };

  handleCloseSnackbar = () => {
    this.setState({
      openSnackbar: false
    })
  };

  handleBackReview = () => {
    this.setState({
      value: 2
    })
  };


  render() {

    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };


    return (
      <div className="row">
        <div className="col s12">
          {(this.state.value == 0) ?
            <FormAirlinesINTL onClickFind={this.handleClickFind} getData={this.getData}/> : ''}
          {(this.state.value == 1) ?
            <ListAirlinesINTL passangerData={this.state.passangerData} onClickBack={this.handleClickBack}
                              onClickSubmit={this.handleChooseFlight}/> : ''}
          {(this.state.value == 2) ?
            <FormBookINTL flightData={this.state.flightData} passangerData={this.state.passangerData}
                          onClickBack={this.handleBackForm} onClickProceed={this.handleClickProceed}/> : ''}
          {(this.state.value == 3) ?
            <ReviewINTL flightData={this.state.flightData} passangerData={this.state.passangerData}
                        onClickBack={this.handleBackReview} onClickBook={this.handleBookNow}/> : ''}
          <SnackbarMessage message='Booking Succeed' open={this.state.openSnackbar}
                           closeSnackbar={this.handleCloseSnackbar}/>
        </div>
      </div>
    )
  }
}
