import React from 'react';
import {observer, inject} from 'mobx-react';
import bind from 'bind-decorator';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  AutoComplete,
  CardText,
  FlatButton,
  Divider,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  SelectField,
  MenuItem,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  RadioButton, RadioButtonGroup,
  Tabs, Tab,
  Checkbox,
} from 'material-ui';
import {withRouter} from 'react-router';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
import ContentAdd from 'material-ui/svg-icons/content/add';

import '../style.scss';
import {appConfig} from "../../../config/app";

@inject('appstate')
@observer
export default class ListHotel extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      sortBy: 1,
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

  componentDidMount() {
    console.log('Profile loaded!');

  }

  handleSortBy = (event, index, value) => {
    this.setState({
      sortBy: value 
    });
  };

  updateCheck() {
    this.setState((oldState) => {
      return {
        checked: !oldState.checked,
      };
    });
  }

  render() {

    const listData = [
      {'image' : 'http://cdn.infiniqa.com/hotel/mg/WSASIDDPS000439/hd/UK2VfmMD2Np9BR5MWrMyOqslSl4AHTROmeFPjMJHOW2tyVNbo95Enw9eMYhdc_+idEmTuzP8MAtQ8MHkhceT23LHGUWfTyVD5NOn8ZqrYZvOSLruoAsB2F0qTiqNdDYb+Bg==.jpg',
      'desc' : {
          hotel : {
            name:'SAPTA PETALA',
            address : 'JL. KUBU ANYAR NO 27, KUTA '
          },
          date : '24 Sep 2017',
          'class' : 'VVIP',
          'price' : '200,000'
          },
      },
      {'image' : 'http://cdn.infiniqa.com/hotel/mg/WSASIDDPS001732/hd/w+p7i6Jq3Ce4JSBxr_+s_+BTyaRTqaBU3t9NKQ38UQr_+jZ3P3NgFFfGyFtgOCuKJNM5O8pq4pWpyY_+aSPMUBax_+cZx0K+kc18w5EeR8F9k3WX+FjZxxmTRKpwZByO503MPwsA8.jpg',
      'desc' : {
          hotel : {
            name:'DUO LEGIAN HOTEL',
            address : 'JL. LEGIAN GG. MELANI, LEGIAN KUTA  '
          },
          date : '24 Sep 2017',
          'class' : 'Economic',
          'price' : '225,000'
          },
      },
      {'image' : 'http://cdn.infiniqa.com/hotel/mg/WSASIDDPS000772/hd/wq5kNEs+oIGpQp5T1ZsUzeSLLA9VnBfZizfJO+ZbBM2stGo0OYYaMCC2IuAtXjv3WvnYJ4kBMOqRN6lzeNu_+ZcjqN4Z9MpR0iQf_+CxslByXXRRq1XB5PThDF4U2SFjdmaTA=.jpg',
      'desc' : {
          hotel : {
            name:'SPAZZIO BALI',
            address : ' JALAN DEWI SRI NO. 20 KUTA   '
          },
          date : '24 Sep 2017',
          'class' : 'VVIP',
          'price' : '245,000'
          },
      },
      {'image' : 'http://cdn.infiniqa.com/hotel/mg/WSASIDDPS000334/hd/IdWujyfyYpvBS48uuKK3XH6DW_+d9QEfhwb8YCB8bMfqatqPyrIZcy1j2gRwOipxRcDHKZEK+RUoI7_+h7mJ2VA1KQzL9t_+x9ezYtEBrssheKpLG9P5egbuLz8qmvR5pDOAh4=.jpg',
      'desc' : {
          hotel : {
            name:'LOFT LEGIAN HOTEL',
            address : 'JL.MELASTI NO 99 LEGIAN  '
          },
          date : '24 Sep 2017',
          'class' : 'VVIP',
          'price' : '249,000'
          },
      },
    ]

    const sortBy = [,
      <MenuItem key={1} value={1} primaryText="Price (low to hight)"/>,
      <MenuItem key={2} value={2} primaryText="Price (hight to low)"/>,
      <MenuItem key={3} value={3} primaryText="Star (hight)"/>,
      <MenuItem key={4} value={4} primaryText="Star (low)"/>,
    ];

    return (
          <div className="animated fadeIn">
              <div className="col s12 l8 left-panel">
                <Card>
                <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                <ToolbarGroup>
                <IconButton
                  iconClassName="material-icons"
                  tooltip="Back"
                  style={{marginLeft:'0px'}}
                  onClick={this.props.onClickBack}
                >
                  arrow_back
                </IconButton>
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Find Schedule'}/>
                </ToolbarGroup>
              </Toolbar>
              <Divider/>
              {(listData.slice(0, listData.length)).map(item => {
              return (
            <div>
              <div style={{padding: '14px'}}>
              
                <div className="row">
                  <div className="col m4">
                    <img src={`${item.image}`} className="img-responsive"/>
                  </div>
                  <div className="col m8">
                    <div className="row">
                      <div className="col m12">
                        <p style={{color:'#FF8926',fontWeight:'bold',fontSize:'16px'}}>{item.desc.hotel.name}</p>
                        <p>
                          <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                          <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                          <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                        </p>
                        <p><FontIcon className="material-icons">place</FontIcon> {item.desc.hotel.address}  </p>
                        <br />
                      </div>
                      </div>
                    <div className="row" style={{marginTop:'20px'}}>
                      <div className="col m9">
                        <font>Harga 1 malam mulai dari:</font>
                        <br />
                        <font style={{fontSize:'20px',color:'#c50000',fontWeight:'bold'}}>IDR {item.desc.price}</font>
                      </div>
                      <div className="col m3"><RaisedButton primary={true} onClick={this.props.onChoose} label='Book' /></div>
                    </div>
                    
                  </div>
                </div>

              </div>
              <Divider/>
            </div>
            )
            })}
              </Card>
              </div>
              <div className="col s12 l4">
                  <div className="row">
                    <div className="col s12 l12">
                    <Card>
                      <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                        <ToolbarGroup>
                          <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'SEARCH FILTER'}/>
                        </ToolbarGroup>
                      </Toolbar>
                      <Divider/>
                      <div>
                        <div className="row" style={{marginTop:'20px',padding:'10px'}}>
                          <p className="label-form">Sort By</p>
                            <SelectField
                              value={this.state.sortBy}
                              onChange={this.handleSortBy}
                              fullWidth={true}
                              >
                              {sortBy}
                            </SelectField>
                        </div>
                        <div className="row" style={{padding:'10px'}}>
                        <p className="label-form">Star Rating</p>
                        <Checkbox
                          label={ 
                            <div>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon> 
                            </div>
                          }
                        />
                        <Checkbox
                          label={ 
                            <div>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                            </div>
                          }
                        />
                        <Checkbox
                          label={ 
                            <div>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon> 
                            </div>
                          }
                        />
                        <Checkbox
                          label={ 
                            <div>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon> 
                            </div>
                          }
                        />
                        <Checkbox
                          label={ 
                            <div>
                              <FontIcon className="material-icons" style={{color:'#FFFF00'}}>star</FontIcon> 
                            </div>
                          }
                        />
                        <Checkbox
                          label={ 
                            <div>
                              <p style={{color:'#FFFF00', fontSize:'1.5em'}}>No star </p> 
                            </div>
                          }
                        />
                        </div>
                        <div className="row" style={{padding:'10px'}}>
                        <p className="label-form">Price</p>
                          <Checkbox
                            label="IDR 0 to 500.000"
                          />
                          <Checkbox
                            label="IDR 500.000 to 1.000.000"
                          />
                          <Checkbox
                            label="IDR 1.000.000 to 1.500.000"
                          />
                          <Checkbox
                            label="IDR 1.500.000 to 2.000.000"
                          />
                          <Checkbox
                            label="IDR 2.000.000 ++"
                          />
                        </div>
                      </div>
                    </Card>
                    </div>
                  </div>
              </div>
            </div>
      
    )
  }
}
