import React from 'react';
import {observer, inject} from 'mobx-react';
import bind from 'bind-decorator';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  TextField,
  AutoComplete,
  CardText,
  FlatButton,
  Divider,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  SelectField,
  MenuItem,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  RadioButton, RadioButtonGroup, DropDownMenu,
  Tabs, Tab,
  GridList, GridTile
} from 'material-ui';
import {withRouter} from 'react-router';
import EmptyComponent from '../../EmptyComponent';
import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh';

import '../style.scss';
import {appConfig} from "../../../config/app";
import NumberFormat from 'react-number-format';
import moment from "moment/moment";

@inject('appstate')
@observer
export default class ListPackageSearch extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      dataSource: ['12345', '23456', '34567'],
      currencyValue: 1
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.packageStore = props.appstate.packages;
  }

  componentWillMount() {
    this.packageStore.getAllPackages();

  }

  componentDidMount() {

  }

  handleChange = (event, index, value) => this.setState({value});

  handleUpdateInput = (value) => {
    this.setState({
      dataSource: [
        value,
        value + value,
        value + value + value,
      ]
    });
  };

  dateHandler = (date, format) => {
    return moment((date) ? date : new date()).format((format) ? format : "YYYY-MM-DD");
  };

  handleDepartureDate = (event, date) => {
    this.packageStore.setDepartureDate(this.dateHandler(date, "YYYY-MM-DD"));
    this.packageStore.getAllPackagesByQueries();
  };

  render() {
    const styles = {
      root: {
        padding: '14px',
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
      },
      gridList: {
        width: 500,
        height: 450,
        overflowY: 'auto',
      },
    };
    return (
      <div className="col s12 l3" style={{position: 'sticky', top: 90}}>
        <Card className="cardLite">
          <div style={{padding: '14px'}}>
            <div className="col l9 m9 s9">
              <div className="header-text-mini" style={{fontSize: '1.23em', marginBottom: '20px', marginTop: 10}}>Filter
              </div>
            </div>
            <div className="col l3 m3 s3">
              <IconButton tooltip="Reset"
                          onClick={() => {
      console.log('clicked');
                            this.packageStore.queries.departure_date = '';
                            this.packageStore.getAllPackagesbyStatus();
                          }}
                          style={{marginTop: "-3px", marginRight: "-10px"}}
                          iconStyle={{
                            width: 20,
                            height: 20,
                          }}>
                <NavigationRefresh/>
              </IconButton>
            </div>
            <div className="row" style={{marginBottom: 0}}>
              <div className="col l12 m12 s12 passive">Departure</div>
              <div className="col l12 m12 s12">
                <DatePicker fullWidth={true}
                            style={{width: '100%'}}
                            hintText="E.g YYYY-MM-DD"
                            mode="landscape"
                            onChange={this.handleDepartureDate}/>
              </div>
            </div>
            <div className="row">
              <div className="col l12 m12 s12">
                <SelectField
                  floatingLabelText="Currency"
                  value={this.state.currencyValue}
                  onChange={this.handleChange}
                  fullWidth={true}
                >
                  <MenuItem value={1} primaryText="IDR"/>
                  <MenuItem value={2} primaryText="USD"/>
                  <MenuItem value={3} primaryText="HKD"/>
                  <MenuItem value={4} primaryText="SGD"/>
                </SelectField>
              </div>
            </div>
            <div className="row">
              <div className="col l12 m12 s12 passive">Destination</div>
              <div className="col l12 m12 s12">
                <AutoComplete
                  hintText="E.g Jakarta"
                  dataSource={this.state.dataSource}
                  onUpdateInput={this.handleUpdateInput}
                  fullWidth={true}
                />
              </div>
            </div>
            <div className="row">
              <div className="col l12 m12 s12 passive">Price</div>
              <div className="col l6 m6 s6">
                <TextField hintText="From" fullWidth={true}/>
              </div>
              <div className="col l6 m6 s6">
                <TextField hintText="To" fullWidth={true}/>
              </div>
            </div>
            <div className="row">
              <div className="col l12 m12 s12 passive">Peoples</div>
              <div className="col l12 m12 s12">
                <TextField hintText="E.g 4" fullWidth={true}/>
              </div>
            </div>
          </div>
        </Card>
      </div>
    )
  }
}
