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";

const useStyles = makeStyles(styles);
const DataCheckout = function ({ backend, order,  ...props }) {
    const classes = useStyles();
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const SemuaOrder = order.map((data) => {
        return (
            <GridContainer>
                <div align="left">
                        <GridContainer style={{padding:"15px"}}>
                            <Grid xs={4}> 
                                <div className={classes.section} id="notifications">
                                    <div className={classes.section}>
                                        <div className={classes.container}>
                                        <GridContainer>
                                            <GridItem className={classes.marginAuto}>
                                                <img className={navImageClasses} width="100px" alt="First slide" src={Image}/>
                                            </GridItem>
                                        </GridContainer>
                                        </div>
                                    </div>
                                </div>
                            </Grid>
                            <Grid xs={8} style={{padding:"40px", marginTop:"-65px"}}>
                                <div align="right">

                                </div>
                                <div align="left">
                                    <h2>All New NMAX VSS</h2>
                                    <h4>Variasi : Hitam</h4>
                                    <h4>Jumlah : 1 Unit</h4>
                                </div>
                            </Grid>
                        </GridContainer>
                </div>    
            </GridContainer>
        );
    })

    const BelumBayar = order.map((data) => {
        return (
            <div align="center">
                <Card className={classes.textCenter} align="center">
                    <CardBody>
                    <div style={{padding:"10px"}}>
                        <h5>Yusmar</h5>
                        <h5>087797315685</h5>
                        <h5>Thamrin Indrapura Jl.Aipda Karel Satsuit Tubun,17 Ilir, Kec.Ilir Tim.I, Palembang, KOTA PALEMBANG - ILIR TIMUR II, SUMATERA SELATAN, ID 30114</h5>
                        <Button color="info" href={"/yamaha/profile/edit-profile"}>
                            <Icon className={classes.icons}>cached</Icon>
                            Ubah Alamat
                        </Button>
                    </div>
                    </CardBody>
                </Card>
            </div>
        );
    })

    const Dikemas = order.map((data) => {
        return (
            <div align="center">
                <Card className={classes.textCenter} align="center">
                    <CardBody>
                    <div style={{padding:"10px"}}>
                        <h5>Yusmar</h5>
                        <h5>087797315685</h5>
                        <h5>Thamrin Indrapura Jl.Aipda Karel Satsuit Tubun,17 Ilir, Kec.Ilir Tim.I, Palembang, KOTA PALEMBANG - ILIR TIMUR II, SUMATERA SELATAN, ID 30114</h5>
                        <Button color="info" href={"/yamaha/profile/edit-profile"}>
                            <Icon className={classes.icons}>cached</Icon>
                            Ubah Alamat
                        </Button>
                    </div>
                    </CardBody>
                </Card>
            </div>
        );
    })

    const Dikirim = order.map((data) => {
        return (
            <div align="center">
                <Card className={classes.textCenter} align="center">
                    <CardBody>
                    <div style={{padding:"10px"}}>
                        <h5>Yusmar</h5>
                        <h5>087797315685</h5>
                        <h5>Thamrin Indrapura Jl.Aipda Karel Satsuit Tubun,17 Ilir, Kec.Ilir Tim.I, Palembang, KOTA PALEMBANG - ILIR TIMUR II, SUMATERA SELATAN, ID 30114</h5>
                        <Button color="info" href={"/yamaha/profile/edit-profile"}>
                            <Icon className={classes.icons}>cached</Icon>
                            Ubah Alamat
                        </Button>
                    </div>
                    </CardBody>
                </Card>
            </div>
        );
    })

    const Selesai = order.map((data) => {
        return (
            <div align="center">
                <Card className={classes.textCenter} align="center">
                    <CardBody>
                    <div style={{padding:"10px"}}>
                        <h5>Yusmar</h5>
                        <h5>087797315685</h5>
                        <h5>Thamrin Indrapura Jl.Aipda Karel Satsuit Tubun,17 Ilir, Kec.Ilir Tim.I, Palembang, KOTA PALEMBANG - ILIR TIMUR II, SUMATERA SELATAN, ID 30114</h5>
                        <Button color="info" href={"/yamaha/profile/edit-profile"}>
                            <Icon className={classes.icons}>cached</Icon>
                            Ubah Alamat
                        </Button>
                    </div>
                    </CardBody>
                </Card>
            </div>
        );
    })

    return (
        <Card className={classes.textCenter}>
            <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: (
                            <GridContainer justify="center">
                                <div>
                                    <Typography variant="h6" align="left" className={classes.title}>
                                        Semua Pesanan
                                    </Typography><hr/>
                                    {SemuaOrder}
                                </div>
                            </GridContainer>
                            ),
                        },
                        {
                            tabButton: "Belum Bayar",
                            tabIcon: Dashboard,
                            tabContent: (
                            <GridContainer justify="center">
                                <div>
                                    <Typography variant="h6" align="left" className={classes.title}>
                                        Belum Bayar
                                    </Typography><hr/>
                                    {BelumBayar}
                                </div>
                            </GridContainer>
                            ),
                        },
                        {
                            tabButton: "Dikemas",
                            tabIcon: Dashboard,
                            tabContent: (
                            <GridContainer justify="center">
                                <Typography variant="h6" align="left" className={classes.title}>
                                    Dikemas
                                </Typography><hr/>
                                {Dikemas}
                            </GridContainer>
                            ),
                        },
                        {
                            tabButton: "Dikirim",
                            tabIcon: Dashboard,
                            tabContent: (
                            <GridContainer justify="center">
                                <Typography variant="h6" align="left" className={classes.title}>
                                    Dikirim
                                </Typography><hr/>
                                {Dikirim}
                            </GridContainer>
                            ),
                        },
                        {
                            tabButton: "Selesai",
                            tabIcon: Dashboard,
                            tabContent: (
                            <GridContainer justify="center">
                                <Typography variant="h6" align="left" className={classes.title}>
                                    Selesai
                                </Typography><hr/>
                                {Selesai}
                            </GridContainer>
                            ),
                        },
                        ]}
                    />
                    </GridItem>
                </GridContainer>
            </CardBody>
        </Card>
    );
}

export default DataCheckout;