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 {
  DatePicker as DatePickerAntd,
  AutoComplete as AutoCompleteAntd,
  Divider as DividerAntd,
  Input as InputAntd,
  Button as ButtonAntd,
  Icon as IconAntd
} from 'antd';

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: [],
      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() {

  }

  onSelect(value) {
    console.log('onSelect', value);
  }

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

  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="">
        <DatePickerAntd style={{width: 150, marginTop: 10}} placeholder="Departure Date"/>
        <AutoCompleteAntd
          dataSource={this.state.dataSource}
          style={{width: 150, marginLeft: 10}}
          onSelect={this.onSelect}
          onSearch={this.handleSearch}
          placeholder="Destination"
        />
        <DividerAntd type="vertical"/>
        <InputAntd style={{width: 150, marginLeft: 0, marginTop: 10}} placeholder="Price From" />
        <InputAntd style={{width: 150, marginLeft: 10, marginTop: 10}} placeholder="Price To" />
        <DividerAntd type="vertical"/>
        <InputAntd type="number" style={{width: 100, marginLeft: 0, marginTop: 10}} placeholder="Pax" />
        <DividerAntd type="vertical"/>
        <ButtonAntd type="primary" icon="search">Search</ButtonAntd>
      </div>
    )
  }
}
