import React from 'react';
import {inject, observer} from 'mobx-react';
import {
  AutoComplete,
  Avatar,
  Card,
  CardHeader,
  Dialog,
  Divider,
  FlatButton,
  FontIcon,
  IconMenu,
  MenuItem,
  RaisedButton,
  SelectField,
  TextField
} from 'material-ui';
import {
    Row, 
    Col, 
    Select, 
    DatePicker, 
    Button,
    // Card,
    Slider,
    // Divider,
    Rate, 
    Checkbox, 
    Icon, 
    // Avatar, 
    Tag} from "antd"
import moment from 'moment';
import get from 'lodash.get';
import Loader from 'react-loader-advanced';
import LoadingDialog from "../LoadingDialog";
import omit from 'lodash.omit';
import {LINKS} from "../../routes";

import './style.scss';

@inject('appstate')
@observer
export default class HotelComponent 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.appstate = props.appstate;
    this.globalUI = props.appstate.globalUI;
  }

  componentDidMount() {

  }

  componentWillUnmount() {

    console.log('COMPONENT GONE');
  }

  render() {

    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

    return (
      <div className="row" style={{marginTop:50}}>

        <div className="col s12 col-sm-noPadding">
          <Card className="animated fadeIn cardLite" style={{marginBottom: (window.innerWidth < 600) ? 0 : 10, height: (window.innerWidth < 600) ? "100%" : "auto"}}>
            <CardHeader
              title="Hotel"
              titleColor={"#ffffff"}
              style={{background: 'rgb(43, 57, 145)', borderRadius: '4px 4px 0 0'}}
              subtitleStyle={{fontSize: 12, color: "rgba(255, 255, 255, 0.54)"}}
              subtitle="Domestic & International"
              avatar={<Avatar backgroundColor={"transparent"}
                              style={{borderRadius: 'none', height: 20, width: 20, marginRight: 16, marginTop: 8}}
                              src="/assets/images/icon/hotel-icon.png"/>}
            />
            <Divider/>
            <Loader
              show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
              messageStyle={{textAlign: 'center'}}
              backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
              <div style={{padding: '24px 14px 14px 14px'}}>
                <div className="row" style={{marginTop: (window.innerWidth < 600) ? 0 : 20}}>
                  <div className="col s12 l3 m3">
                    <p className="label-form">Where</p>
                        <Select
                            allowClear
                            showSearch
                            showArrow={false}
                            style={{ width: '100%' }}
                            placeholder="City or airport"
                            optionFilterProp="children"
                            onChange={this.whereHandleChange}
                            onFocus={this.whereHandleFocus}
                            onBlur={this.whereHandleBlur}
                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                        >
                            <Option value="jakarta">Jakarta</Option>
                            <Option value="bali">Bali</Option>
                            <Option value="surabaya">Surabaya</Option>
                        </Select>
                  </div>
                  <div className="col s12 m3 l3">
                      <p className="label-form">Check-in</p>
                      <DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
                  </div>
                  <div className="col s12 m3 l3">
                      <p className="label-form">Check-out</p>
                      <DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
                  </div>
                  <div className="col s12 m3 l3">
                  <p className="label-form">Rooms</p>
                    <Select
                        allowClear
                        showSearch
                        showArrow={false}
                        style={{ width: '100%' }}
                        placeholder="Select"
                        optionFilterProp="children"
                        onChange={this.roomsHandleChange}
                        onFocus={this.roomsHandleFocus}
                        onBlur={this.roomsHandleBlur}
                        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    >
                        <Option value="jakarta">1 Adult, 0 Children</Option>
                        <Option value="bali">2 Adult, 0 Children</Option>
                        <Option value="surabaya">More options</Option>
                    </Select>
                  </div>
                </div>

                <div className="row">
                  <div className="col s0 l10"></div>
                  <div className="col s12 l2">
                    <Button type="primary" onClick={() => {
                        this.props.history.push(LINKS.HOTEL_SEARCH);
                        console.log('hotel');
                      }} icon="search">Search</Button>
                  </div>
                </div>

              </div>
            </Loader>
          </Card>
        </div>
      </div>
    )
  }
}