import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Card,
  Toolbar,
  ToolbarGroup,
  ToolbarTitle,
} from 'material-ui';
import { Button, Avatar, Rate, Divider } from 'antd';
import './style.scss';
import moment from 'moment';

@inject('appstate')
@observer
export default class RatingComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      primaryState: 'all'
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
  }

  componentDidMount() {
    
  }

  render() {

    return (
      <div className="row">
        <div className="col l12 m12 s12">
          <Card className="animated fadeIn cardLite">
            <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
              <ToolbarGroup>
                <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Store Rating'}/>
              </ToolbarGroup>
              {/* <ToolbarGroup className="ToolbarGroupLast">
                <ToolbarSeparator/>
                <Link to={LINKS.USER}>
                  <RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New User" primary={true}/>
                </Link>
              </ToolbarGroup> */}
            </Toolbar>
            <Divider style={{marginTop: -3}}/>
            <div style={{padding: 15}}>
              <div className="row" style={{marginTop: -25}}>
                <Button onClick={() => this.setState({primaryState: 'all'})} style={{width: 80}} type={(this.state.primaryState==='all') ? "primary" : ""}>All</Button>
                <Button onClick={() => this.setState({primaryState: 5})} style={{marginLeft: 15, width: 80}} type={(this.state.primaryState===5) ? "primary" : ""}>5 Star</Button>
                <Button onClick={() => this.setState({primaryState: 4})} style={{marginLeft: 15, width: 80}} type={(this.state.primaryState===4) ? "primary" : ""}>4 Star</Button>
                <Button onClick={() => this.setState({primaryState: 3})} style={{marginLeft: 15, width: 80}} type={(this.state.primaryState===3) ? "primary" : ""}>3 Star</Button>
                <Button onClick={() => this.setState({primaryState: 2})} style={{marginLeft: 15, width: 80}} type={(this.state.primaryState===2) ? "primary" : ""}>2 Star</Button>
                <Button onClick={() => this.setState({primaryState: 1})} style={{marginLeft: 15, width: 80}} type={(this.state.primaryState===1) ? "primary" : ""}>1 Star</Button>
              </div>
              <div className="row">
                <div className="row" style={{marginTop: 25}}>
                  <div className="col s1">
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="large"/>
                  </div>
                  <div className="col s10" style={{marginLeft: '-1vw'}}>
                    <div className="row">
                      <p className="rating-username">username</p>
                    </div>
                    <div className="row" style={{marginTop: -35}}>
                      <Rate disabled defaultValue={5} />
                      <span className="rating-title">Title</span>
                    </div>
                    <div className="row" style={{marginTop: -15}}>
                      <p className="rating-content">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
                        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                        aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
                        qui officia deserunt mollit anim id est laborum.
                      </p>
                      <Divider />
                    </div>
                    <div className="row" style={{marginTop: -25}}>
                      <div className="col"><p className="rating-user-name">User Name</p></div>
                      <div className="col"><Divider type="vertical"/></div>
                      <div className="col"><p className="rating-date">{moment().format('DD MMMM YYYY, HH:mm')}</p></div>
                    </div>
                  </div>
                  <div className="col s1">
                    <Button type="" icon="message">Reply</Button>
                  </div>
                </div>
                <div className="row">
                  <div className="reply-rating">
                    <p className="response">Your Response</p>
                    <p className="response-content">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
                      et dolore magna aliqua.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    )
  }
}
