import React from "react";
import { inject, observer } from "mobx-react";
import compose from 'recompose/compose';
import withStyles from "@material-ui/core/styles/withStyles";
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
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 getGridListCols = () => {
      if (isWidthUp('lg', this.props.width)) {
        return 4;
      }

      if (isWidthUp('md', this.props.width)) {
        return 3;
      }

      if (isWidthUp('sm', this.props.width)) {
        return 2;
      }

      return 1;
    }
    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={(this.props.appstate.wallet.data.wallet).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={10} sm={10} md={9} lg={9}>
              <Typography variant="h6" gutterBottom>
                Voucher & Gift Card
              </Typography>
              <MuiGridList cellHeight={180} cols={getGridListCols()} 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="120"
                            style={{
                              marginLeft: 'auto',
                              marginRight: 'auto',
                              width: 180
                            }}
                            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={10} sm={10} md={9} lg={9}>
              <Typography variant="h6" gutterBottom>
                Voucher & Gift Card
              </Typography>
            <Grid container spacing={24}
              justify="center"
              alignItems="center"
              style={{ marginTop: 15 }}>
              {(this.vouchersStore.list.length > 0) ?
                this.vouchersStore.list.map((item, index) => {
                  console.log("itemm", item)
                  let image = get(item, 'images.main', '');

                  if (!image.includes('http')) {
                    image = this.http.appendImagePath(image);
                  }
                  return (
                    <Grid item xs={12} sm={6} md={4} lg={3}>

                      <MuiCard className={classes.card}>
                        <div style={{display:'flex',alignItems:'center',justifyContent:'center'}}>
                        <MuiCardMedia
                          component="img"
                          alt={item.name}
                          className={classes.media}
                          height="120"
                          style={{
                            marginLeft: 'auto',
                            marginRight: 'auto',
                            marginTop:10,
                            marginBottom:10,
                            width: 180,
                            objectFit:'contain'
                          }}
                          image={image}
                          title={item.name}
                        />
                        </div>
                        <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>
                    </Grid>
                  )
                }) : (<EmptyComponent type="default4" header="" content="There is no voucher in sight" />)
              }
            </Grid>
            </Grid>

          </Grid>
        </Grid>
        {this.state.isOpened && (
          <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 compose(withStyles(styles), withWidth())(DashboardComponent);