import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Card,
  CardText,
  Divider,
  Toolbar,
  ToolbarGroup,
  ToolbarTitle,
} from 'material-ui';
import {Icon, Table, Slider, Affix} from 'antd';
import {LineChart, Line, XAxis, YAxis, ReferenceLine, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from 'recharts';
import './style.scss';
import moment from 'moment';

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

  componentDidMount() {
    
  }

  render() {
    const marks = {
      0: {
        style: {
          color: '#5cb85c'
        },
        label: <p className="mark-start">0 Pts</p>
      },
      5: {
        style: {
          color: '#5cb85c'
        },
        label: <p className="mark-start">5</p>
      },
      100: {
        style: {
          color: '#d9534f',
        },
        label: <p className="mark-end">100 Pts</p>,
      },
    };

    const data = [
      {name: 'January', Points: 40},
      {name: 'February', Points: 30},
      {name: 'March', Points: 20},
      {name: 'April', Points: 27},
      {name: 'May', Points: 18},
      {name: 'June', Points: 23},
      {name: 'July', Points: 34},
      {name: 'August', Points: 25},
      {name: 'September', Points: 21},
      {name: 'October', Points: 40},
      {name: 'November', Points: 23},
      {name: 'December', Points: 5},
    ];

    const columns = [{
      title: 'Date',
      dataIndex: 'date',
      key: 'date',
    }, {
      title: 'Type',
      dataIndex: 'type',
      key: 'type',
    }, {
      title: 'Explanation',
      dataIndex: 'explanation',
      key: 'explanation',
    }, {
      title: 'Points',
      dataIndex: 'pts',
      key: 'pts',
    }];

    const dataTable = [{
      key: '1',
      date: moment().format('MMMM Do YYYY'),
      type: 'Lorem',
      explanation: 'Lorem Ipsum Dolor Sit Amet',
      pts: 25
    }, {
      key: '2',
      name: moment().format('MMMM Do YYYY'),
      type: 'Lorem',
      explanation: 'Lorem Ipsum Dolor Sit Amet',
      pts: 25
    }, {
      key: '3',
      name: moment().format('MMMM Do YYYY'),
      type: 'Lorem',
      explanation: 'Lorem Ipsum Dolor Sit Amet',
      pts: 25
    },{
      key: '4',
      date: moment().format('MMMM Do YYYY'),
      type: 'Lorem',
      explanation: 'Lorem Ipsum Dolor Sit Amet',
      pts: 25
    }, {
      key: '5',
      name: moment().format('MMMM Do YYYY'),
      type: 'Lorem',
      explanation: 'Lorem Ipsum Dolor Sit Amet',
      pts: 25
    }, {
      key: '6',
      name: moment().format('MMMM Do YYYY'),
      type: 'Lorem',
      explanation: 'Lorem Ipsum Dolor Sit Amet',
      pts: 25
    }];


    return (
        <div className="">
          <div className={"row"}>
            <Card className="animated fadeIn cardLite">
              <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                <ToolbarGroup>
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Penalty Point System'}/>
                </ToolbarGroup>
                {/* <ToolbarGroup className="ToolbarGroupLast">
                  <ToolbarSeparator/>
                  <Link to={LINKS.USER}>
                    <RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New User" primary={true}/>
                  </Link>
                </ToolbarGroup> */}
              </Toolbar>
              <Divider/>
              <div style={{padding: 15}}>
                <p className="penalty-description">
                  Penalty Point Systems are point-based systems designed to reward Sellers who have good store performance,
                  in order to be the primary choice of Buyers versus Sellers with poor store performance.
                </p>
              </div>
            </Card>
          </div>

          {/*<div className={"row"}>*/}
            {/*<Card className="cardLite cardDashboard" style={{marginTop: 25}}>*/}
              {/*<Toolbar className="toolbarCard" style={{backgroundColor: '#fff', marginTop: -15, marginLeft: -8}}>*/}
                {/*<ToolbarGroup>*/}
                  {/*<CardHeader*/}
                    {/*title="Your Points"*/}
                    {/*subtitle="Your statistic for last 3 months."*/}
                    {/*avatar={<Icon type="wallet" style={{ fontSize: 25, color: '#555' }}/>}*/}
                    {/*style={{marginLeft: -15}}*/}
                  {/*/>*/}
                {/*</ToolbarGroup>*/}
              {/*</Toolbar>*/}
            {/*</Card>*/}
          {/*</div>*/}
          <div className="row">
            <div className="col s12 m6 l6 left-section">
              <Card className="animated fadeIn cardLite">
                <CardText>
                  <div className="body-card">
                    <div className="slider-status">
                      <p className="text-title">
                        Very Good
                      </p>
                      <p className="text-content">
                        Your store performance is very good - just few penalty points are earned.
                        Maintain the performance of your store!
                      </p>
                    </div>
                    <div className="slider">
                      <Slider marks={marks} defaultValue={5} disabled={true} />
                    </div>
                  </div>
                </CardText>
              </Card>

              <Card className="animated fadeIn cardLite table">
                <CardText>
                  <div className="body-card">
                    <Table columns={columns} dataSource={dataTable} />
                  </div>
                </CardText>
              </Card>
            </div>
            <div className="col s12 m6 l6 right-section">
              <Affix offsetTop={85}>
                <Card className="animated fadeIn cardLite">
                  <CardText>
                    <div className="body-card">
                      <p className={"chart-title"}>
                        This is the penalty point you have earned on this year
                      </p>
                      <ResponsiveContainer width={"100%"} height={300}>
                        <LineChart margin={{top: 0, right: 0, left: -35, bottom: 0}} data={data}>
                          <XAxis dataKey="name"/>
                          <YAxis/>
                          <CartesianGrid strokeDasharray="3 3"/>
                          <Tooltip/>
                          <Legend />
                          <ReferenceLine y={100} label="Max Points" stroke="red"/>
                          <Line type="monotone" dataKey="Points" stroke="#82ca9d" />
                        </LineChart>
                      </ResponsiveContainer>
                    </div>
                  </CardText>
                </Card>
              </Affix>
            </div>
          </div>
        </div>
    )
  }
}
