import React from "react";
import {inject, observer} from "mobx-react";
import withStyles from "@material-ui/core/styles/withStyles";
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 {default as MuiCard} from '@material-ui/core/Card'
import {default as MuiCardContent} from '@material-ui/core/CardContent';
import {default as MuiCardMedia} from '@material-ui/core/CardMedia';
import {default as MuiCardActions} from '@material-ui/core/CardActions';
import {default as MuiCardActionArea} from '@material-ui/core/CardActionArea';
import {default as MuiCardButton} from '@material-ui/core/Button';
import {default as MuiGridList} from '@material-ui/core/GridList';
import {default as MuiGridListTile} from '@material-ui/core/GridListTile';
import {default as MuiButton} from '@material-ui/core/Button';
import {default as MuiDivider} from '@material-ui/core/Divider';
import Hidden from '@material-ui/core/Hidden';
import Chip from '@material-ui/core/Chip';
import {default as MuiGridListTileBar} from '@material-ui/core/GridListTileBar';
import ListSubheader from '@material-ui/core/ListSubheader';
import IconButton from '@material-ui/core/IconButton';
import InfoIcon from '@material-ui/icons/Info';
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";
import Typography from '@material-ui/core/Typography';
import {styles} from "../RegisterNew/styles";
import get from "lodash.get";

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

@inject('appstate')
@observer
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;
    this.http = props.appstate.http;
  }

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

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

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

    return (
      <Grid className={classes.root}>

        <Grid
          container
          direction="row"
          justify="center"
          alignItems="center"
          spacing={24}
          style={{marginTop: 0}}>

          <Grid item xs={12} sm={12} md={12} lg={12}>
            <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>
          </Grid>

          <Grid
            container
            direction="row"
            justify="center"
            alignItems="center"
            spacing={24}
            style={{marginTop: 30}}>

            <Grid item xs={10} sm={3} md={3} lg={3}>
              {this.props.appstate.wallet.data.wallet ? (
                <MuiCard className={classes.card}>
                  <MuiCardContent>
                    <Typography variant="h5" component="h2">
                      Voucher
                    </Typography>
                    <Typography component="p">
                      <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
                    </Typography>
                  </MuiCardContent>
                  <MuiCardActions>
                    <MuiCardButton type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</MuiCardButton>
                  </MuiCardActions>
                </MuiCard>
              ) : ''}
            </Grid>

            <Grid item xs={10} sm={3} md={3} lg={3}>
              {this.props.appstate.wallet.data.wallet ? (
                <MuiCard className={classes.card}>
                  <MuiCardContent>
                    <Typography variant="h5" component="h2">
                      Profile
                    </Typography>
                    <Typography component="p">
                      Please complete your profile
                    </Typography>
                  </MuiCardContent>
                  <MuiCardActions>
                    <MuiCardButton type="primary" icon="plus" onClick={() => console.log('Edit Profile')}>Edit Profile</MuiCardButton>
                  </MuiCardActions>
                </MuiCard>
              ) : ''}
            </Grid>

            <Grid item xs={10} sm={3} md={3} lg={3}>
              {this.props.appstate.wallet.data.wallet ? (
                <MuiCard className={classes.card}>
                  <MuiCardContent>
                    <Typography variant="h5" component="h2">
                      Credit Card
                    </Typography>
                    <Typography component="p">
                      Please add your credit card
                    </Typography>
                  </MuiCardContent>
                  <MuiCardActions>
                    <MuiCardButton type="primary" icon="plus" onClick={() => console.log('Edit Profile')}>Add Credit Card</MuiCardButton>
                  </MuiCardActions>
                </MuiCard>
              ) : ''}
            </Grid>
          </Grid>

          <Grid
            container
            direction="column"
            justify="center"
            alignItems="center"
            spacing={24}
            style={{marginTop: 30}}>

            <Grid item xs={9} sm={9} md={9} lg={9}>
              <Typography variant="h6" gutterBottom>
                Voucher & Gift Card
              </Typography>
              <MuiGridList cellHeight={180} cols={4} className={classes.gridList} style={{
                width: '100%',
                height: undefined,
              }}>
                {(this.vouchersStore.list.length > 0) ?
                  this.vouchersStore.list.map((item, index) => {
                    let image = get(item, 'images.logo', '');

                    if (!image.includes('http')) {
                      image = this.http.appendImagePath(image);
                    }
                    return (
                        <MuiGridListTile key={index} className={classes.imgFullWidth} style={{
                          height: 'auto',
                          padding: 5,
                          // border: "1px solid #000"
                        }}>
                          <MuiCard className={classes.card}>
                            <MuiCardMedia
                              component="img"
                              alt={item.name}
                              className={classes.media}
                              height="130"
                              image={image}
                              title={item.name}
                            />
                            <MuiDivider light/>
                            <MuiCardContent>
                              <Typography noWrap={true} variant="subtitle1">
                                {item.name}
                              </Typography>
                              <Typography className={classes.pos} color="textSecondary">
                                Ind
                              </Typography>
                              <Typography variant="subtitle2">
                                From: 100 Point
                              </Typography>
                            </MuiCardContent>
                            <MuiCardActions>
                              <MuiButton
                                fullWidth
                                variant="outlined"
                                color="primary"
                                onClick={() => this.setState({isOpened: true, data: item})}
                                size="small">
                                Redeem
                              </MuiButton>
                            </MuiCardActions>
                          </MuiCard>
                        </MuiGridListTile>
                    )
                  }) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>)
                }
              </MuiGridList>
            </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>
        </Grid>
        <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})}
        />
        <ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup}/>
      </Grid>
    );
  }
}

export default withStyles(styles)(DashboardComponent);