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

import { makeStyles } from "@material-ui/core/styles";
import GridContainer from "components/Grid/GridContainer.js";
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 styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
import Icon from "@material-ui/core/Icon";
import { Motorcycle } from "@material-ui/icons";
import NumberFormat from 'react-number-format';
import SnackbarContent from "components/Snackbar/SnackbarContent.js";

const useStyles = makeStyles(styles);
const DataProduct = function ({
    backend,
    ygp,
    yamalube,
    helmet,
    apparel,
    accessories, ...props })  {
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);

    const YGP = ygp.map((data) => {
        return (
            <div style={{padding: "20px", marginTop:"-40px"}}>
                <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
                    <CardBody>
                    <div align="center" style={{padding:"10px"}}>
                        <div align="center">
                        <img style={{ width: "100px", height:"100px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                        />
                        <h5><b>{data.name}</b></h5>
                        <h5>
                            <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
                        </h5><br/>
                        <Button
                            color="info" round
                            href={"/yamaha/product/ygp_details?s="+data.id}
                        >
                            <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                        </Button>
                        </div>
                    </div>
                    </CardBody>
                </Card>
            </div>
        );
    })

    const Yamalube = yamalube.map((data) => {
        return (
            <div style={{padding: "20px", marginTop:"-40px"}}>
                <Card className={classes.textCenter} align="center" style={{width:"300px", height:"350px"}}>
                    <CardBody>
                    <div align="center" style={{padding:"10px"}}>
                        <img style={{ width: "100px", height:"100px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                        />
                        <div align="center">
                        <h5><b>{data.name}</b></h5>
                        <h5>
                            <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
                        </h5><br/>
                        <Button
                            color="info" round
                            href={"/yamaha/product/yamalube_detail?s="+data.id}
                        >
                            <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                        </Button>
                        </div>
                    </div>
                    </CardBody>
                </Card>
            </div>
        );
    })

    const Helmet = helmet.map((data) => {
        return (
            <div style={{padding: "20px", marginTop:"-40px"}}>
                <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
                    <CardBody>
                    <div align="center" style={{padding:"10px"}}>
                        <img style={{ width: "150px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                        />
                        <div align="center">
                        <h5><b>{data.name}</b></h5>
                        <h5><b>
                          <NumberFormat value={data.price1} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /> s/d  <NumberFormat value={data.price2} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                        </b></h5>
                        <Button
                            color="info" round
                            href={"/yamaha/product/helmet_details?s="+data.id}
                        >
                            <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                        </Button>
                        </div>
                    </div>
                    </CardBody>
                </Card>
            </div>
        );
    })

    const Apparel = apparel.map((data) => {
        return (
            <div style={{padding: "20px", marginTop:"-40px"}}>
            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
                <CardBody>
                <div align="center" style={{padding:"10px"}}>
                    <img style={{ width: "100px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                    />
                    <div align="center">
                    <h5><b>{data.name}</b></h5>
                    <h5>
                        <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
                    </h5>
                    <Button
                        color="info" round
                        href={"/yamaha/product/helmet_details?s="+data.id}
                    >
                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                    </Button>
                    </div>
                </div>
                </CardBody>
            </Card>
            </div>
        );
    })

    const Accessories = accessories.map((data) => {
        return (
            <div style={{padding: "20px", marginTop:"-40px"}}>
            <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
                <CardBody>
                <div align="center" style={{padding:"10px"}}>
                    <img style={{ width: "100px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                    />
                    <div align="center">
                    <h5><b>{data.name}</b></h5>
                    <h5>
                        <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
                    </h5>
                    <Button
                        color="info" round
                        href={"/yamaha/product/helmet_details?s="+data.id}
                    >
                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                    </Button>
                    </div>
                </div>
                </CardBody>
            </Card>
            </div>
        );
    })

    return (
    <Card className={classes.textCenter}>
        <div align="center">
            <CardHeader color="info">Product</CardHeader>
        </div>
        <CardBody>
            <div align="center">
            <h2><b>Sparepart & Accessories</b></h2>
            </div>
            <GridContainer justify="center">
                <GridItem>
                <NavPills
                    alignCenter
                    color="primary"
                    tabs={[
                    {
                        tabButton: "YGP",
                        tabIcon: Motorcycle,
                        tabContent: (
                        <GridContainer justify="center">
                            {YGP}
                        </GridContainer>
                        ),
                    },
                    {
                        tabButton: "Yamalube",
                        tabIcon: Motorcycle,
                        tabContent: (
                        <GridContainer justify="center">
                            {Yamalube}
                        </GridContainer>
                        ),
                    },
                    {
                        tabButton: "Helmet",
                        tabIcon: Motorcycle,
                        tabContent: (
                        <GridContainer justify="center">
                            {Helmet}
                        </GridContainer>
                        ),
                    },
                    {
                        tabButton: "Apparel",
                        tabIcon: Motorcycle,
                        tabContent: (
                        <GridContainer justify="center">
                            {Apparel}
                        </GridContainer>
                        ),
                    },
                    {
                        tabButton: "Accessories",
                        tabIcon: Motorcycle,
                        tabContent: (
                          <GridContainer justify="center">
                            {Accessories}
                          </GridContainer>
                        ),
                    },
                    ]}
                />
                </GridItem>
            </GridContainer>
        </CardBody>
    </Card>
    );
}

export default DataProduct;