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, 
    TimePicker,
    // 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';
const format = 'HH:mm';

@inject('appstate')
@observer
export default class CarComponent 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="Car"
              titleColor={"#ffffff"}
              style={{background: 'rgb(43, 57, 145)', borderRadius: '4px 4px 0 0'}}
              subtitleStyle={{fontSize: 12, color: "rgba(255, 255, 255, 0.54)"}}
              subtitle="Sewa mobil dengan point anda"
              avatar={<Avatar backgroundColor={"transparent"}
                              style={{borderRadius: 'none', height: 20, width: 20, marginRight: 16, marginTop: 8}}
                              src="/assets/images/icon/car-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 l4 m4">
                    <p className="label-form">Country</p>
                        <Select
                            allowClear
                            showSearch
                            showArrow={false}
                            style={{ width: '100%' }}
                            placeholder="Select Country"
                            optionFilterProp="children"
                            onChange={this.whereHandleChange}
                            onFocus={this.whereHandleFocus}
                            onBlur={this.whereHandleBlur}
                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                        >
                            <Option value="Indonesia">Indonesia</Option>
                            <Option value="Amerika">Amerika</Option>
                        </Select>
                  </div>
                  <div className="col s12 m4 l4">
                      <p className="label-form">City</p>
                      <Select
                            allowClear
                            showSearch
                            showArrow={false}
                            style={{ width: '100%' }}
                            placeholder="Select City"
                            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 m4 l4">
                      <p className="label-form">Lokasi</p>
                      <Select
                            allowClear
                            showSearch
                            showArrow={false}
                            style={{ width: '100%' }}
                            placeholder="Select Location"
                            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 Airport">Jakarta Airport</Option>
                            <Option value="Jakarta Downtown">Jakarta Downtown</Option>
                            <Option value="Monas">Monas</Option>
                        </Select>
                  </div>
                </div>
                <div className="row" style={{marginTop: (window.innerWidth < 600) ? 0 : 20}}>
                  <div className="col s12 l3 m3">
                    <p className="label-form">Start Date</p>
                    <DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
                  </div>
                  <div className="col s12 m3 l3">
                      <p className="label-form">Start Time</p>
                      <TimePicker style={{width:'100%'}} defaultValue={moment('12:08', format)} format={format} />
                  </div>
                  <div className="col s12 m3 l3">
                      <p className="label-form">Until Date</p>
                      <DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
                  </div>
                  <div className="col s12 m3 l3">
                      <p className="label-form">End Time</p>
                      <TimePicker style={{width:'100%'}} defaultValue={moment('12:08', format)} format={format} />,
                  </div>
                </div>
                <div className="row" style={{marginTop:10}}>
                  <div className="col s12 m6 l6">
                    <Checkbox style={{}} value="Usia pengendara 25 sampai 70 tahun?">Usia pengendara 25 sampai 70 tahun?</Checkbox>
                  </div>
                  <div className="col s12 m6 l6">
                    <Checkbox style={{}} value="Kembali ke lokasi yang sama">Kembali ke lokasi yang sama</Checkbox>
                  </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.CAR_SEARCH);
                        console.log('car');
                      }} icon="search">Search</Button>
                  </div>
                </div>

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