import React from "react";
import { inject, observer } from "mobx-react";
import QueueAnim from 'rc-queue-anim';
import "./style.scss";
import NumberFormat from 'react-number-format';
import { LINKS } from './../../routes'
import { Link } from 'react-router-dom';
import CardAdmin from './CardAdmin';
import CardAgent from './CardAgent';
import moment from 'moment';
import { Icon, Button, notification, Table, Tooltip as TooltipAntd, Col, Row, } from 'antd';
import DC from 'decimal.js-light';
import {
  Paper,
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  CardText,
  FlatButton,
  GridList,
  GridTile,
  Divider, ListItem, List
} from 'material-ui';
import Grid from '@material-ui/core/Grid';
import EmptyComponent from '../EmptyComponent';
import * as _ from 'lodash';
import { grey400, darkBlack, lightBlack, black } from 'material-ui/styles/colors';
import './style.scss';
import { Carousel } from 'react-responsive-carousel'
import { ActionGrade, ContentDrafts, ContentInbox, ContentSend } from "material-ui/svg-icons/index";
import { constant } from "../../config/const";
import Slider from "react-slick";
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import VoucherComponent from '../Vouchers/index';
import slider1 from '../../../../assets/images/slider/1.jpg';
import slider2 from '../../../../assets/images/slider/2.jpg';
import slider3 from '../../../../assets/images/slider/3.jpg';
import slider4 from '../../../../assets/images/slider/4.jpg';
import slider5 from '../../../../assets/images/slider/5.jpg';
import { ItemCard } from "../Vouchers/ItemCard";
import ModalVouchersComponent from "../Vouchers/Modal";
import PopularItemCardComponent from "./PopularItemCard";
import NewItemCardComponent from "./NewItemCard";
import '../Vouchers/style.scss';
import ModalTopupComponent from "../Wallet/Modal";

const {
  LineChart,
  AreaChart,
  BarChart,
  Bar,
  Line,
  XAxis,
  YAxis,
  ReferenceLine,
  CartesianGrid,
  Tooltip,
  Legend,
  Area,
  ResponsiveContainer
} = require('recharts/umd/Recharts.min');

@inject('appstate')
@observer
export default class DashboardComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isOpened: false,
      modalTopup: false,
      data: {
        name: '',
        background_color_1:'',
        background_color_2:'',
        images: {
          logo:''
        },
        description: '',
        additional_data: {
          information:''
        },
        sku: [
          {
            id:'',
            name: '',
            price: ''
          },
        ]
      },
    };
    this.vouchersStore = props.appstate.vouchers;
  }

  componentDidMount() {
    this.vouchersStore.getList();
  }

  setModalTopup = (bool) => {
    this.setState({modalTopup: bool});
  };

  render() {
    const settings = {
      arrows: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      fade: true
    };

    return (
      <div>
        <div className="dashboard animated fadeIn" style={{marginLeft: '8%',marginRight:'7%'}}>
          <div className="row ">
            <div className="col s12 m12 l12 col-leftDashboard" style={{ marginBottom: 0 }}>
              <div className="row no-margin">
              {this.props.appstate.wallet.data.wallet ? (
                <div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
                <Card className="cardLite cardDashboard">
                  <h3 style={{
                    display: 'block',
                    fontSize: '1rem',
                    textTransform: 'uppercase',
                    color: '#0006',
                    letterSpacing: 1
                  }}>Voucher</h3>
                  <div className="value">
                  {/* <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> */}
                  <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
                  </div>
                  <div style={{marginTop:10}}>
                    <Button type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</Button>
                    {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
                      <span>Add Voucher</span>
                      <Icon className="ml-8" type="right" />
                    </a> */}
                  </div>
                </Card>
              </div>
              ) : ''}
                
                {this.props.appstate.wallet.data.wallet ? (
                <div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
                  <Card className="cardLite cardDashboard">
                    <h3 style={{
                      display: 'block',
                      fontSize: '1rem',
                      textTransform: 'uppercase',
                      color: '#0006',
                      letterSpacing: 1
                    }}> Profile</h3>
                    <div className="value">Please complete your profile</div>
                    <div style={{marginTop:10}}>
                    <Button type="primary" icon="edit">Edit Profile</Button>
                      {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
                        <span>Edit Profile</span>
                        <Icon className="ml-8" type="right" />
                      </a> */}
                    </div>
                  </Card>
                </div>
                ) : ''}


                {this.props.appstate.wallet.data.wallet ? (
                <div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
                  <Card className="cardLite cardDashboard">
                    <h3 style={{
                      display: 'block',
                      fontSize: '1rem',
                      textTransform: 'uppercase',
                      color: '#0006',
                      letterSpacing: 1
                    }}>Credit Card</h3>
                    <div className="value ">Please add your credit card</div>
                    <div style={{marginTop:10}}>
                    <Button type="primary" icon="plus">Add Credit Card</Button>
                        {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
                        <span>Add Credit Car</span>
                        <Icon className="ml-8" type="right" />
                      </a> */}
                    </div>
                  </Card>
                </div>
                ) : ''}
              </div>
            </div>
          </div>
        </div>




        <div style={{ marginLeft: '10%', marginRight: '10%', marginTop: 20, flexGrow: 1, minHeight: window.innerHeight - 70, backgroundColor: '#fff' }}>
          <div>
            <Slider {...settings}>
              <div>
                <img src={slider1} width={'100%'} />
              </div>
              <div>
                <img src={slider2} width={'100%'} />
              </div>
              <div>
                <img src={slider3} width={'100%'} />
              </div>
              <div>
                <img src={slider4} width={'100%'} />
              </div>
              <div>
                <img src={slider5} width={'100%'} />
              </div>
            </Slider>
          </div>

          <div>
            <Grid container spacing={0} style={{}}>
              {/* <Grid item xs={12}>
                <div>
                  <div className="row">
                    <div className="col l12 m12 s12 padding">
                      <h3>
                        Popular Items
                    </h3>
                      <Row gutter={10}>
                        <PopularItemCardComponent />
                      </Row>
                    </div>
                  </div>
                </div>
              </Grid>
              <Grid item xs={12}>
                <div>
                  <div className="row">
                    <div className="col l12 m12 s12 padding">
                      <h3>
                        New Products
                    </h3>
                      <Row gutter={10}>
                        <NewItemCardComponent />
                      </Row>
                    </div>
                  </div>
                </div>
              </Grid> */}
              <Grid item xs={12}>
                <div className={"voucher"} style={{ marginTop: 0 }}>
                  <div className="row">
                    <div className="col l12 m12 s12 padding">
                      <h3>
                        Voucher & Gift Card
                    </h3>

                      <Row gutter={10}>
                      {
                        ( this.vouchersStore.list.length > 0) ?
                        this.vouchersStore.list.map((item, index) => {
                          return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
                            <ItemCard data={item}/>
                          </Col>)
                        })
                        : (
                          <EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
                        )
                      }
                      </Row>

                      <ModalVouchersComponent
                        title={this.state.data.name+' Vouchers'}
                        data={this.state.data}
                        isVisible={this.state.isOpened}
                        onOk={() => this.setState({isOpened: false})}
                        onCancel={() => this.setState({isOpened: false})}
                      />
                    </div>
                  </div>
                </div>
              </Grid>
            </Grid>
          </div>
        </div>
        <ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
      </div>
    );
  }
}