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>
    );
  }
}
