import React from 'react';
import {inject, observer} from 'mobx-react';
import {
    FlatButton
} from 'material-ui';
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox ,Divider, DatePicker, TimePicker, List } from 'antd';
import {startCase} from 'lodash';
import LoadingDialog from "../LoadingDialog";
import Loader from 'react-loader-advanced';
import './style.scss';
import {DIALOG} from "../../stores/global_ui";
import EmptyComponent from '../EmptyComponent';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import Search from 'material-ui/svg-icons/action/search';

const format = 'HH:mm';



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

  componentDidMount() {

  }

  handleChangeMinimal = (valueMinimal) => {
    this.setState({ valueMinimal });
  };

  handleChangeMaximal = (valueMaximal) => {
    this.setState({ valueMaximal });
  };

  handleBlur = () => {
    console.log('blur');
  }

  handleFocus = () => {
    console.log('focus');
  }

  handleChangeSearch = () => {
    this.setState({
        changeSearch : true
    })
  }

  handleChangeSearchFalse = () => {
    this.setState({
        changeSearch : false
    })
  }

  

  render() {
    const { valueMinimal, valueMaximal } = this.state;

    const dataAgya = [
        'Full to full gasoline',
        '4 people',
        '4 door',
      ];

      const dataAvanza = [
        'Full to full gasoline',
        '4 people',
        '5 door',
      ];

      const dataInova = [
        'Full to full gasoline',
        '6 people',
        '4 door',
      ];

    return (
      <div className="wallet containerMiddle">
        <div className="row">
          <div className="col l3 m3 s3 no-padding">
              <Card title="Filter" bordered={true} style={{ width: '100%' }}>
                <p>Min. Points</p>
                <Slider max={1000} onChange={this.handleChangeMinimal} value={valueMinimal} />

                <p>Max. Points</p>
                <Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} />

                <p style={{marginTop: 25}}>Kelas Point</p>
                <Checkbox.Group style={{ width: '100%' }} >
                  <Row>
                      <Col span={16}><Checkbox style={{}} value="Mini">Mini</Checkbox></Col>
                      <Col span={16}><Checkbox style={{}} value="Special">Special</Checkbox></Col>
                  </Row>
              </Checkbox.Group>

            <p style={{marginTop: 25}}>Penyejuk Mobil</p>
            <Checkbox.Group style={{ width: '100%' }} >
                <Row>
                    <Col span={16}><Checkbox style={{}} value="Air Conditional">Air Conditional</Checkbox></Col>
                </Row>
              </Checkbox.Group>

              <p style={{marginTop: 25}}>Penyejuk Mobil</p>
            <Checkbox.Group style={{ width: '100%' }} >
                <Row>
                    <Col span={16}><Checkbox style={{}} value="Automatic">Automatic</Checkbox></Col>
                </Row>
                <Row>
                    <Col span={16}><Checkbox style={{}} value="Manual">Manual</Checkbox></Col>
                </Row>
              </Checkbox.Group>
              </Card>
          </div>

          <div className="col s9 m9 l9">
            <div style={{ marginBottom: '10px',display:'flex','justifyContent' :'space-between', marginLeft:20}}>
                <FlatButton
                    className="headerMenu"
                    hoverColor="#f1f5f9"
                    style={{ background: '#ffffff00' }}
                    onClick={() => this.props.history.goBack()}
                    label="Back"
                    primary={true}
                    icon={<NavigationArrowBack />}
                />
                <Button onClick={this.state.changeSearch == false ? this.handleChangeSearch : this.handleChangeSearchFalse} icon="search">Ganti Pencarian</Button>
            </div>
            {(this.state.changeSearch == true) ? (
                <Row>
                    <Card title="Ganti pencarian mobil" style={{marginLeft:20}}>
                      <div className="row" style={{marginTop: (window.innerWidth < 600) ? 0 : 20}}>
                            <div className="col s12 l4 m4">
                                <p className="label-form" style={{marginBottom:5}}>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" style={{marginBottom:5}}>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" style={{marginBottom:5}}>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" style={{marginBottom:5}}>Start Date</p>
                                <DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
                            </div>
                            <div className="col s12 m3 l3">
                                <p className="label-form" style={{marginBottom:5}}>Start Time</p>
                                <TimePicker style={{width:'100%'}} defaultValue={moment('12:08', format)} format={format} />
                            </div>
                            <div className="col s12 m3 l3" style={{marginBottom:5}}>
                                <p className="label-form" style={{marginBottom:5}}>Until Date</p>
                                <DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
                            </div>
                            <div className="col s12 m3 l3" style={{marginBottom:5}}>
                                <p className="label-form" style={{marginBottom:5}}>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" style={{}} onClick={() => {
                                    this.props.history.push(LINKS.HOTEL_SEARCH);
                                    console.log('hotel');
                                }} icon="search">Search</Button>
                            </div>
                        </div>
                    </Card>
                </Row>
            ) : (
                <div />
            )}
            
            <Divider style={{ marginBottom: 20, marginTop: 20, marginLeft:20 }} />
            <Row>
              <Card
                  style={{marginLeft:20,marginBottom:20}}
              >
                  <Row>
                      <Col span={8}>
                          <img alt="example" src="https://cdn.rcstatic.com/images/car_images/new_images/toyota/agya_lrg.jpg" style={{width:'100%', height:190}} />
                      </Col>
                      <Col span={1} />
                      <Col span={15}>
                            <Row>
                            <h2>Toyota Agya</h2>
                            </Row>
                            <Row style={{marginBottom:10}}>
                            <Col span={12}>
                          <h4 style={{color:'grey'}}><Icon type="environment" />At Airport</h4>
                          <div style={{marginBottom:10}}>
                              <Tag color="#f50">Air Conditional</Tag>
                              <Tag color="#7E57C2">Mini</Tag>
                              <Tag color="#87d068">Automatic</Tag>
                          </div>
                          <h2 style={{color:'#2962FF'}}>99,643 Poin</h2>
                            </Col>
                            <Col span={12}>
                                <List
                                size="small"
                                dataSource={dataAgya}
                                renderItem={item => (<List.Item>{item}</List.Item>)}
                                />
                            </Col>
                            </Row>
                            <Row>
                            <Col span={24}>
                              <Button type="primary" block style={{}}>Pesan</Button>
                          </Col>
                            </Row>
                      </Col>
                  </Row>
              </Card>
            </Row>

            <Row>
              <Card
                  style={{marginLeft:20,marginBottom:20}}
              >
                  <Row>
                      <Col span={8}>
                          <img alt="example" src="https://cdn.rcstatic.com/images/car_images/new_images/toyota/avanza_lrg.jpg" style={{width:'100%', height:190}} />
                      </Col>
                      <Col span={1} />
                      <Col span={15}>
                            <Row>
                            <h2>Toyota Avanza</h2>
                            </Row>
                            <Row style={{marginBottom:10}}>
                            <Col span={12}>
                          <h4 style={{color:'grey'}}><Icon type="environment" />At Airport</h4>
                          <div style={{marginBottom:10}}>
                              <Tag color="#f50">Air Conditional</Tag>
                              <Tag color="#2db7f5">Special</Tag>
                              <Tag color="#87d068">Automatic</Tag>
                          </div>
                          <h2 style={{color:'#2962FF'}}>109,132 Poin</h2>
                            </Col>
                            <Col span={12}>
                                <List
                                size="small"
                                dataSource={dataAvanza}
                                renderItem={item => (<List.Item>{item}</List.Item>)}
                                />
                            </Col>
                            </Row>
                            <Row>
                            <Col span={24}>
                              <Button type="primary" block style={{}}>Pesan</Button>
                          </Col>
                            </Row>
                      </Col>
                  </Row>
              </Card>
          </Row>
          <Row>
              <Card
                  style={{marginLeft:20,marginBottom:20}}
              >
                  <Row>
                      <Col span={8}>
                          <img alt="example" src="https://cdn.rcstatic.com/images/car_images/new_images/toyota/innova_lrg.jpg" style={{width:'100%', height:190}} />
                      </Col>
                      <Col span={1} />
                      <Col span={15}>
                            <Row>
                            <h2>Toyota Inova</h2>
                            </Row>
                            <Row style={{marginBottom:10}}>
                            <Col span={12}>
                          <h4 style={{color:'grey'}}><Icon type="environment" />At Airport</h4>
                          <div style={{marginBottom:10}}>
                              <Tag color="#f50">Air Conditional</Tag>
                              <Tag color="#2db7f5">Special</Tag>
                              <Tag color="#87d068">Automatic</Tag>
                          </div>
                          <h2 style={{color:'#2962FF'}}>147,091 Poin</h2>
                            </Col>
                            <Col span={12}>
                                <List
                                size="small"
                                dataSource={dataInova}
                                renderItem={item => (<List.Item>{item}</List.Item>)}
                                />
                            </Col>
                            </Row>
                            <Row>
                            <Col span={24}>
                              <Button type="primary" block style={{}}>Pesan</Button>
                          </Col>
                            </Row>
                      </Col>
                  </Row>
              </Card>
            </Row>
          </div>
        </div>


      </div>
    )
  }
}
