import React from "react";
import classNames from "classnames";

import { makeStyles } from "@material-ui/core/styles";
import Dashboard from "@material-ui/icons/Dashboard";

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import GridItem from "components/Grid/GridItem.js";
import NavPills from "components/NavPills/NavPills.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
import Typography from '@material-ui/core/Typography';
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
import Carousel from "react-slick";
import Image from "assets/img/sosmed/yt.jpg";
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles(styles);
const DataCheckout = function ({ midtransClient, transactionToken, backend, order, unpaid, prepared, sending, finished, ...props }) {
    const classes = useStyles();
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const SemuaOrder = order.map((data) => {
        return (
            <div className={classes.root}>
                <Card style={{padding:"10px"}}>
                    <Grid container spacing={3}>
                        <Grid item xs={6}>
                            <h4>Dealer A.Rivai | Thamrin Brothers - Yamaha</h4>
                        </Grid>
                        <Grid item xs={6}>
                            <div align="right">
                                <h4>Paket Telah Diterima | Selesai</h4>
                            </div>
                        </Grid>
                    </Grid>
                    <Grid container spacing={3}>
                        <Grid item xs={4}><br/>
                            <img src={Image} width="60%"/>
                        </Grid>
                        <Grid item xs={4} style={{marginLeft:"-70px", marginTop:"12px"}}>
                            <h4>All New NMAX 155 Connected / ABS Version</h4>
                            <h5>Variasi = Hitam</h5>
                            <h5>Jumlah = 1 Unit</h5>
                        </Grid>
                        <Grid item xs={4}>
                            <div align="right" style={{marginRight:"-70px", marginTop:"12px"}}>
                                <h4>Rp.32.000.000,-</h4><br/><br/><br/><br/>
                                <h4>Total Pesanan = Rp.32.000.000,-</h4>
                            </div>
                        </Grid>
                    </Grid>
                    <Grid container>
                        <Grid item xs={4}>
                            <h5>Nilai produk sebelum 30-10-2021</h5>
                            <h5>Nilai sekarang & dapatkan 100 Koin Loyalty!</h5>
                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                            <Button color="danger" href={"/yamaha/product/product_detail?s="}>
                                <Icon className={classes.icons}>shopping_cart</Icon>Beli Lagi Produk
                            </Button>
                            </div>
                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                            <Button 
                                color="info"
                                href={"/yamaha/product/product_detail?s="}
                            >
                                <Icon className={classes.icons}>open_in_new</Icon>Beri Nilai Produk
                            </Button>
                            </div>
                        </Grid>
                    </Grid>
                </Card>
            </div>
        );
    })

    const BelumBayar = unpaid.map((data) => {
        return (
            <div className={classes.root}>
                <Card style={{padding:"10px"}}>
                    <Grid container spacing={3}>
                        <Grid item xs={6}>
                            <h4>Dealer A.Rivai | Thamrin Brothers - Yamaha</h4>
                        </Grid>
                        <Grid item xs={6}>
                            <div align="right">
                                <h4>Paket Telah Diterima | Selesai</h4>
                            </div>
                        </Grid>
                    </Grid>
                    <hr/>
                    <Grid container spacing={3}>
                        <Grid item xs={4}><br/>
                            <img src={Image} width="60%"/>
                        </Grid>
                        <Grid item xs={4} style={{marginLeft:"-70px", marginTop:"12px"}}>
                            <h4>{data.product_name}</h4>
                            <h5>Variasi = {data.product_color}</h5>
                            <h5>Jumlah = {data.product_quantity} Unit</h5>
                        </Grid>
                        <Grid item xs={4}>
                            <div align="right" style={{marginRight:"-70px", marginTop:"12px"}}>
                                <h4>Rp.{data.product_price},-</h4><br/><br/><br/><br/>
                                <h4>Total Pesanan = Rp.{data.product_price},-</h4>
                            </div>
                        </Grid>
                    </Grid>
                    <Grid container>
                        <Grid item xs={4}>
                            <h5>Nilai produk sebelum 30-10-2021</h5>
                            <h5>Nilai sekarang & dapatkan 100 Koin Loyalty!</h5>
                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                                <Button color="info" onClick={(e)=>{snap.pay(transactionToken);}}  style={{width:"100%"}}>
                                <Icon className={classes.icons}>attach_money</Icon>
                                Bayar Pesanan
                                </Button>
                            </div>
                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                            <Button 
                                color="info"
                                href={"/yamaha/product/product_detail?s="}
                            >
                                <Icon className={classes.icons}>open_in_new</Icon>Hapus Produk
                            </Button>
                            </div>
                        </Grid>
                    </Grid>
                </Card>
            </div>
        );
    })

    const Dikemas = prepared.map((data) => {
        return (
            <div className={classes.root}>
                <Card style={{padding:"10px"}}>
                    <Grid container spacing={3}>
                        <Grid item xs={6}>
                            <h4>Dealer A.Rivai | Thamrin Brothers - Yamaha</h4>
                        </Grid>
                        <Grid item xs={6}>
                            <div align="right">
                                <h4>Paket Telah Diterima | Selesai</h4>
                            </div>
                        </Grid>
                    </Grid>
                    <hr/>
                    <Grid container spacing={3}>
                        <Grid item xs={4}><br/>
                            <img src={Image} width="80%"/>
                        </Grid>
                        <Grid item xs={4}>
                            <h3>All New NMAX 155 Connected / ABS Version</h3>
                            <h5>Variasi = Hitam</h5>
                            <h5>Jumlah = 1 Unit</h5>
                        </Grid>
                        <Grid item xs={4}>
                            <div align="left">
                                <h3>Rp.32.000.000,-</h3><br/><br/><br/><br/>
                                <h3>Total Pesanan = Rp.32.000.000,-</h3>
                            </div>
                        </Grid>
                    </Grid>
                    <hr/><br/>
                    <Grid container>
                        <Grid item xs={4}>
                            <h5>Nilai produk sebelum 30-10-2021</h5>
                            <h5>Nilai sekarang & dapatkan 100 Koin Loyalty!</h5>
                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                            <Button 
                                color="danger"
                                href={"/yamaha/product/product_detail?s="}
                            >
                                <Icon className={classes.icons}>shopping_cart</Icon>Beli Lagi Produk
                            </Button>
                            </div>
                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                            <Button 
                                color="info"
                                href={"/yamaha/product/product_detail?s="}
                            >
                                <Icon className={classes.icons}>open_in_new</Icon>Beri Nilai Produk
                            </Button>
                            </div>
                        </Grid>
                    </Grid>
                </Card>
            </div>
        );
    })

    const Dikirim = sending.map((data) => {
        return (
            <div className={classes.root}>
                <Card style={{padding:"10px"}}>
                    <Grid container spacing={3}>
                        <Grid item xs={6}>
                            <h4>Dealer A.Rivai | Thamrin Brothers - Yamaha</h4>
                        </Grid>
                        <Grid item xs={6}>
                            <div align="right">
                                <h4>Paket Telah Diterima | Selesai</h4>
                            </div>
                        </Grid>
                    </Grid>
                    <hr/>
                    <Grid container spacing={3}>
                        <Grid item xs={4}><br/>
                            <img src={Image} width="80%"/>
                        </Grid>
                        <Grid item xs={4}>
                            <h3>All New NMAX 155 Connected / ABS Version</h3>
                            <h5>Variasi = Hitam</h5>
                            <h5>Jumlah = 1 Unit</h5>
                        </Grid>
                        <Grid item xs={4}>
                            <div align="left">
                                <h3>Rp.32.000.000,-</h3><br/><br/><br/><br/>
                                <h3>Total Pesanan = Rp.32.000.000,-</h3>
                            </div>
                        </Grid>
                    </Grid>
                    <hr/><br/>
                    <Grid container>
                        <Grid item xs={4}>
                            <h5>Nilai produk sebelum 30-10-2021</h5>
                            <h5>Nilai sekarang & dapatkan 100 Koin Loyalty!</h5>
                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                            <Button 
                                color="danger"
                                href={"/yamaha/product/product_detail?s="}
                            >
                                <Icon className={classes.icons}>shopping_cart</Icon>Beli Lagi Produk
                            </Button>
                            </div>
                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                            <Button 
                                color="info"
                                href={"/yamaha/product/product_detail?s="}
                            >
                                <Icon className={classes.icons}>open_in_new</Icon>Beri Nilai Produk
                            </Button>
                            </div>
                        </Grid>
                    </Grid>
                </Card>
            </div>
        );
    })

    const Selesai = finished.map((data) => {
        return (
            <div className={classes.root}>
                <Card style={{padding:"10px"}}>
                    <Grid container spacing={3}>
                        <Grid item xs={6}>
                            <h4>Dealer A.Rivai | Thamrin Brothers - Yamaha</h4>
                        </Grid>
                        <Grid item xs={6}>
                            <div align="right">
                                <h4>Paket Telah Diterima | Selesai</h4>
                            </div>
                        </Grid>
                    </Grid>
                    <hr/>
                    <Grid container spacing={3}>
                        <Grid item xs={4}><br/>
                            <img src={Image} width="80%"/>
                        </Grid>
                        <Grid item xs={4}>
                            <h3>All New NMAX 155 Connected / ABS Version</h3>
                            <h5>Variasi = Hitam</h5>
                            <h5>Jumlah = 1 Unit</h5>
                        </Grid>
                        <Grid item xs={4}>
                            <div align="left">
                                <h3>Rp.32.000.000,-</h3><br/><br/><br/><br/>
                                <h3>Total Pesanan = Rp.32.000.000,-</h3>
                            </div>
                        </Grid>
                    </Grid>
                    <hr/><br/>
                    <Grid container>
                        <Grid item xs={4}>
                            <h5>Nilai produk sebelum 30-10-2021</h5>
                            <h5>Nilai sekarang & dapatkan 100 Koin Loyalty!</h5>
                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>

                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                            <Button
                                color="danger"
                                href={"/yamaha/product/product_detail?s="}
                            >
                                <Icon className={classes.icons}>shopping_cart</Icon>Beli Lagi Produk
                            </Button>
                            </div>
                        </Grid>
                        <Grid item xs={2}>
                            <div align="right">
                            <Button 
                                color="info"
                                href={"/yamaha/product/product_detail?s="}
                            >
                                <Icon className={classes.icons}>open_in_new</Icon>Beri Nilai Produk
                            </Button>
                            </div>
                        </Grid>
                    </Grid>
                </Card>
            </div>
        );
    })

    return (
        <Card className={classes.textCenter}>
            <script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="SB-Mid-client-srx674LjNbEybd4-"/>
            <div align="center">
                <CardHeader color="info">Pesanan Saya</CardHeader>
            </div>
            <CardBody>
                <div align="center">
                <h2>Pesayanan Saya</h2>
                </div>
                <GridContainer justify="center">
                    <GridItem>
                    <NavPills
                        alignCenter
                        color="primary"
                        tabs={[
                        {
                            tabButton: "Semua",
                            tabIcon: Dashboard,
                            tabContent: (
                                <div>
                                    <h2>Semua Pesanan</h2><hr/>
                                    <div style={{padding:"20px"}}>
                                        {SemuaOrder}
                                    </div>
                                </div>
                            ),
                        },
                        {
                            tabButton: "Belum Bayar",
                            tabIcon: Dashboard,
                            tabContent: (
                                <div>
                                    <h2>Belum Bayar</h2><hr/>
                                    <div >
                                        {BelumBayar}
                                    </div>
                                </div>
                            ),
                        },
                        {
                            tabButton: "Dikemas",
                            tabIcon: Dashboard,
                            tabContent: (
                                <div>
                                    <h2>Dikemas</h2><hr/>
                                    <div >
                                        {Dikemas}
                                    </div>
                                </div>
                            ),
                        },
                        {
                            tabButton: "Dikirim",
                            tabIcon: Dashboard,
                            tabContent: (
                                <div>
                                    <h2>Dikirim</h2><hr/>
                                    <div >
                                        {Dikirim}
                                    </div>
                                </div>
                            ),
                        },
                        {
                            tabButton: "Selesai",
                            tabIcon: Dashboard,
                            tabContent: (
                                <div>
                                    <h2>Selesai</h2><hr/>
                                    <div >
                                        {Selesai}
                                    </div>
                                </div>
                            ),
                        },
                        ]}
                    />
                    </GridItem>
                </GridContainer>
            </CardBody>
        </Card>
    );
}

export default DataCheckout;