import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  AutoComplete,
  CardText,
  FlatButton,
  List,
  ListItem,
  Snackbar,
  Tabs, Tab,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  MenuItem,
  Toggle,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  RadioButton,
  TextField,
  Paper,
  Divider, 
  RadioButtonGroup
} from 'material-ui';
import './style.scss';
import { 
  Avatar, 
  Icon, 
  Table, 
  Popover,
} from 'antd';

@inject('appstate')
@observer
export default class PerformanceComponent 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 contentFail = (
      <div>
        <p>Looks like you can't reach your target this time. </p>
      </div>
    );
    const contentSuccess = (
      <div>
        <p>You already beaten the target, Keep it up. </p>
      </div>
    );

    const dataSourceOrder = [{
      key: '1',
      name: 'Total Cancellation / Refund',
      my_store: '15%',
      target: '< 20%',
      last_week: '-',
      last_month: '-'
    }, {
      key: '2',
      name: 'Cancellation Rate',
      my_store: '15%',
      target: '< 10%',
      last_week: '-',
      last_month: '-'
    }, {
      key: '3',
      name: 'Returning Rate',
      my_store: '5%',
      target: '< 10%',
      last_week: '-',
      last_month: '-'
    }];
    
    const columnsOrder = [{
      title: '',
      dataIndex: 'name',
      render: (text, row, index) => {
        if(index == 1){
          return(
            <div className="row baris">
              <div className="col kiri red">{text}</div>
              {/* <div className="col kanan">
                <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
              </div> */}
            </div>
          );
        }else{
          return(
            <div className="row baris">
              <div className="col kiri">{text}</div>
            </div>
          );
        }
      }
    }, {
      title: 'My Store',
      dataIndex: 'my_store',
      render: (text, row, index) => {
        if(index == 1){
          return(
            <div className="row baris">
              <div className="col s4 kiri red">{text}</div>
              <Popover content={contentFail} title="Oops, what's happen?">
                <div className="col s3 kanan">
                  <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
                </div>
              </Popover>
            </div>
          );
        }else{
          return(
            <div className="row baris">
              <div className="col s4 kiri">{text}</div>
              <Popover content={contentSuccess} title="Whoa! Very Well..">
                <div className="col s3 kanan">
                  <FontIcon style={{color: 'green', fontSize: 15}} className="material-icons">check_circle</FontIcon>
                </div>
              </Popover>
            </div>
          );
        }
      }
    }, {
      title: 'Target',
      dataIndex: 'target',
      key: 'target',
    }, {
      title: 'Last Week',
      dataIndex: 'last_week',
      key: 'last_week',
    }, {
      title: 'Last Month',
      dataIndex: 'last_month',
      key: 'last_month',
    }];

    const dataSourceDelivery = [{
      key: '1',
      name: 'The Packaging Period',
      my_store: '1 Days',
      target: '< 3 Days',
      last_week: '-',
      last_month: '-'
    }, {
      key: '2',
      name: 'Delays in delivery',
      my_store: '2%',
      target: '< 15%',
      last_week: '-',
      last_month: '-'
    }];
    
    const columnsDelivery = [{
      title: '',
      dataIndex: 'name',
      render: (text, row, index) => {
        if(index == 2){
          return(
            <div className="row baris">
              <div className="col kiri red">{text}</div>
              {/* <div className="col kanan">
                <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
              </div> */}
            </div>
          );
        }else{
          return(
            <div className="row baris">
              <div className="col kiri">{text}</div>
            </div>
          );
        }
      }
    }, {
      title: 'My Store',
      dataIndex: 'my_store',
      render: (text, row, index) => {
        if(index == 2){
          return(
            <div className="row baris">
              <div className="col s4 kiri red">{text}</div>
              <Popover content={contentFail} title="Oops, what's happen?">
                <div className="col s3 kanan">
                  <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
                </div>
              </Popover>
            </div>
          );
        }else{
          return(
            <div className="row baris">
              <div className="col s4 kiri">{text}</div>
              <Popover content={contentSuccess} title="Whoa! Very Well..">
                <div className="col s3 kanan">
                  <FontIcon style={{color: 'green', fontSize: 15}} className="material-icons">check_circle</FontIcon>
                </div>
              </Popover>
            </div>
          );
        }
      }
    }, {
      title: 'Target',
      dataIndex: 'target',
      key: 'target',
    }, {
      title: 'Last Week',
      dataIndex: 'last_week',
      key: 'last_week',
    }, {
      title: 'Last Month',
      dataIndex: 'last_month',
      key: 'last_month',
    }];

    const dataSourceCustomer = [{
      key: '1',
      name: 'Overall Assessment',
      my_store: '4.7 / 5',
      target: '> 4.5',
      last_week: '-',
      last_month: '-'
    }, {
      key: '2',
      name: 'Reply Chat Percentage',
      my_store: '86%',
      target: '> 70%',
      last_week: '-',
      last_month: '-'
    }, {
      key: '3',
      name: 'Chat Time Replied',
      my_store: '30 Min',
      target: '< 1 Days',
      last_week: '-',
      last_month: '-'
    }];
    
    const columnsCustomer = [{
      title: '',
      dataIndex: 'name',
      render: (text, row, index) => {
        if(index == 3){
          return(
            <div className="row baris">
              <div className="col kiri red">{text}</div>
              {/* <div className="col s3 kanan">
                <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
              </div> */}
            </div>
          );
        }else{
          return(
            <div className="row baris">
              <div className="col kiri">{text}</div>
            </div>
          );
        }
      }
    }, {
      title: 'My Store',
      dataIndex: 'my_store',
      render: (text, row, index) => {
        if(index == 3){
          return(
            <div className="row baris">
              <div className="col s4 kiri red">{text}</div>
              <Popover content={contentFail} title="Oops, what's happen?">
                <div className="col s3 kanan">
                  <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
                </div>
              </Popover>
            </div>
          );
        }else{
          return(
            <div className="row baris">
              <div className="col s4 kiri">{text}</div>
              <Popover content={contentSuccess} title="Whoa! Very Well..">
                <div className="col s3 kanan">
                  <FontIcon style={{color: 'green', fontSize: 15}} className="material-icons">check_circle</FontIcon>
                </div>
              </Popover>
            </div>
          );
        }
      }
    }, {
      title: 'Target',
      dataIndex: 'target',
      key: 'target',
    }, {
      title: 'Last Week',
      dataIndex: 'last_week',
      key: 'last_week',
    }, {
      title: 'Last Month',
      dataIndex: 'last_month',
      key: 'last_month',
    }];

    const dataSourceProduct = [{
      key: '0',
      name: 'Serious Product Violations',
      my_store: '',
      target: '',
      last_week: '',
      last_month: ''
    },{
      key: '1',
      name: 'Prohibited Products',
      my_store: '0',
      target: '0',
      last_week: '0',
      last_month: '0'
    }, {
      key: '2',
      name: 'Imitation Products',
      my_store: '0',
      target: '0',
      last_week: '0',
      last_month: '0'
    }, {
      key: '3',
      name: 'Spam Products',
      my_store: '0',
      target: '0',
      last_week: '0',
      last_month: '0'
    }, {
      key: '4',
      name: 'Light Product Violations',
      my_store: '0',
      target: '0',
      last_week: '0',
      last_month: '0'
    }];
    
    const columnsProduct = [{
      title: '',
      dataIndex: 'name',
      render: (text, row, index) => {
        if(index == 8){
          return(
            <div className="row baris">
              <div className="col kiri red">{text}</div>
              {/* <div className="col s3 kanan">
                <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
              </div> */}
            </div>
          );
        }else if(index == 0 && index == 4){
          return(
            <div className="row baris">
              <div className="col kiri">{text}</div>
            </div>
          );
        }else{
          return(
            <div className="row baris">
              <div style={{marginLeft: 10}} className="col kiri">{text}</div>
            </div>
          );
        }
      }
    }, {
      title: 'My Store',
      dataIndex: 'my_store',
      render: (text, row, index) => {
        if(index == 9){
          return(
            <div className="row baris">
              <div className="col s4 kiri red">{text}</div>
              <Popover content={contentFail} title="Oops, what's happen?">
                <div className="col s3 kanan">
                  <FontIcon style={{color: 'red', fontSize: 15}} className="material-icons">error</FontIcon>
                </div>
              </Popover>
            </div>
          );
        }else if(index != 0){
          return(
            <div className="row baris">
              <div className="col s4 kiri">{text}</div>
              <Popover content={contentSuccess} title="Whoa! Very Well..">
                <div className="col s3 kanan">
                  <FontIcon style={{color: 'green', fontSize: 15}} className="material-icons">check_circle</FontIcon>
                </div>
              </Popover>
            </div>
          );
        }
      }
    }, {
      title: 'Target',
      dataIndex: 'target',
      key: 'target',
    }, {
      title: 'Last Week',
      dataIndex: 'last_week',
      key: 'last_week',
    }, {
      title: 'Last Month',
      dataIndex: 'last_month',
      key: 'last_month',
    }];

    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 Performance'}/>
              </ToolbarGroup>
            </Toolbar>
            <Divider/>
            <div style={{padding: 15}}>
              <div className="row">
                <div style={{paddingTop: 15}} className="col l3 m3 s12">
                  <div className="performance-item">
                    <span>Order Finished</span>
                    <p>(30 Days)</p>
                    <div className="rate-warning">
                      <Icon type="exclamation" style={{fontSize: 40, color: 'white', marginTop: 7}}/>
                    </div>
                    <div style={{marginTop:'20px'}}>
                      <div className="row" style={{marginBottom: -10}}>
                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
                        <div className="col s10"><p className="list-performance">Total Cancellation / Refund</p></div>
                      </div>
                      <div className="row" style={{marginBottom: -10}}>
                        <div className="col s2"><FontIcon style={{color: 'red', fontSize: 17.5, marginLeft: 15}} className="material-icons">error</FontIcon></div>
                        <div className="col s10 warning-detail">
                          <p className="list-performance red">Cancellation Rate</p>
                          <div className="performance-warning">
                            <p className="warning-text">
                              The performance of your shop is 5% lower than the recommended target of our system
                            </p>
                          </div>
                        </div>
                      </div>
                      <div className="row" style={{marginBottom: -10}}>
                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
                        <div className="col s10"><p className="list-performance">Returning Rate</p></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style={{paddingTop: 15}} className="col l3 m3 s12">
                  <div className="performance-item">
                    <span>Delivery</span>
                    <p>(30 Days)</p>
                    <div className="rate">
                      <FontIcon className="material-icons" style={{color : 'white', fontSize: 40, marginTop: 7}}>check</FontIcon>
                    </div>
                    <div style={{marginTop:'20px'}}>
                      <div className="row" style={{marginBottom: -10}}>
                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
                        <div className="col s10"><p className="list-performance">Packaging Period</p></div>
                      </div>
                      <div className="row" style={{marginBottom: -10}}>
                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
                        <div className="col s10"><p className="list-performance">Delays in Delivery</p></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style={{paddingTop: 15}} className="col l3 m3 s12">
                  <div className="performance-item">
                    <span>Customer Satisfaction</span>
                    <p>(30 Days)</p>
                    <div className="rate">
                      <FontIcon className="material-icons" style={{color : 'white', fontSize: 40, marginTop: 7}}>check</FontIcon>
                    </div>
                    <div style={{marginTop:'20px'}}>
                      <div className="row" style={{marginBottom: -10}}>
                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
                        <div className="col s10"><p className="list-performance">Overall Assessment</p></div>
                      </div>
                      <div className="row" style={{marginBottom: -10}}>
                      <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
                        <div className="col s10"><p className="list-performance">Reply Chat Percentage</p></div>
                      </div>
                      <div className="row" style={{marginBottom: -10}}>
                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
                        <div className="col s10"><p className="list-performance">Chat Time Replied</p></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style={{paddingTop: 15}} className="col l3 m3 s12">
                  <div className="performance-item">
                    <span>Prohibited Products</span>
                    <p>(30 Days)</p>
                    <div className="rate">
                      <FontIcon className="material-icons" style={{color : 'white', fontSize: 40, marginTop: 7}}>check</FontIcon>
                    </div>
                    <div style={{marginTop:'20px'}}>
                      <div className="row" style={{marginBottom: -10}}>
                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
                        <div className="col s10"><p className="list-performance">Prohibited Products</p></div>
                      </div>
                      <div className="row" style={{marginBottom: -10}}>
                      <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
                        <div className="col s10"><p className="list-performance">Imitation Products</p></div>
                      </div>
                      <div className="row" style={{marginBottom: -10}}>
                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
                        <div className="col s10"><p className="list-performance">Spam Products</p></div>
                      </div>
                      <div className="row" style={{marginBottom: -10}}>
                        <div className="col s2"><FontIcon style={{color: 'green', fontSize: 17.5, marginLeft: 15}} className="material-icons">check_circle</FontIcon></div>
                        <div className="col s10"><p className="list-performance">Light Product Violations</p></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Card>

            <Card className="cardLite" style={{marginTop: 25}}>
              <CardHeader
                title={
                  <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                    <ToolbarGroup>
                      <CardHeader
                        title="Order Finished"
                        subtitle="Your stats about finishing the order."
                        avatar={<Icon type="shopping-cart" style={{ fontSize: 25, color: '#555' }}/>}
                        style={{marginLeft: -15}}
                      />
                    </ToolbarGroup>
                  </Toolbar>
                }
                actAsExpander={true}
                showExpandableButton={true}
              />
              
              <CardText expandable={true}>
                <div className='row'>
                  <Table pagination={false} dataSource={dataSourceOrder} columns={columnsOrder} />
                </div>
              </CardText>
            </Card>

            <Card className="cardLite" style={{marginTop: 25}}>
              <CardHeader
                title={
                  <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                    <ToolbarGroup>
                      <CardHeader
                        title="Delivery"
                        subtitle="Your stats for deliverying products on time."
                        avatar={<Icon type="car" style={{ fontSize: 25, color: '#555' }}/>}
                        style={{marginLeft: -15}}
                      />
                    </ToolbarGroup>
                  </Toolbar>
                }
                actAsExpander={true}
                showExpandableButton={true}
              />
              
              <CardText expandable={true}>
                <div className='row'>
                  <Table pagination={false} dataSource={dataSourceDelivery} columns={columnsDelivery} />
                </div>
              </CardText>
            </Card>

            <Card className="cardLite" style={{marginTop: 25}}>
              <CardHeader
                title={
                  <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                    <ToolbarGroup>
                      <CardHeader
                        title="Customer Satisfaction"
                        subtitle="Percentage of your customer satisfaction about your store."
                        avatar={<Icon type="smile-o" style={{ fontSize: 25, color: '#555' }}/>}
                        style={{marginLeft: -15}}
                      />
                    </ToolbarGroup>
                  </Toolbar>
                }
                actAsExpander={true}
                showExpandableButton={true}
              />
              
              <CardText expandable={true}>
                <div className='row'>
                  <Table pagination={false} dataSource={dataSourceCustomer} columns={columnsCustomer} />
                </div>
              </CardText>
            </Card>

            <Card className="cardLite" style={{marginTop: 25}}>
              <CardHeader
                title={
                  <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                    <ToolbarGroup>
                      <CardHeader
                        title="Prohibited Products"
                        subtitle="Total sales of the prohibited product in your store."
                        avatar={<Icon type="exception" style={{ fontSize: 25, color: '#555' }}/>}
                        style={{marginLeft: -15}}
                      />
                    </ToolbarGroup>
                  </Toolbar>
                }
                actAsExpander={true}
                showExpandableButton={true}
              />
              
              <CardText expandable={true}>
                <div className='row'>
                  <Table pagination={false} dataSource={dataSourceProduct} columns={columnsProduct} />
                </div>
              </CardText>
            </Card>

        </div>
      </div>
    )
  }
}
