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

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 Productmaxi = ygp.map((data) => {
    return (
        <div style={{padding: "20px", marginTop:"-40px"}}>   
        <h1>Tes</h1>
        {/* <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
            <CardBody>
            <div style={{padding:"10px"}}>
                <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
                />
                <div align="center">
                <h5>{data.name}</h5>
                <h5>
                <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                </h5>
                <Button 
                    color="info" round
                    href={"/yamaha/product/product_detail?s="+data.id}
                >
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                </Button>
                <Button
                    color="info" round
                    href={"/yamaha/cart/checkout?s="+data.id}
                >
                    <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
                </Button>
                </div>
            </div>
            </CardBody>
        </Card> */}
        </div>
    );
    })
    const Productmatic = yamalube.map((data) => {
    return (
        <div style={{padding: "20px", marginTop:"-40px"}}>   
        {/* <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
            <CardBody>
            <div style={{padding:"10px"}}>
                <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
                />
                <div align="center">
                <h5>{data.name}</h5>
                <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                <Button 
                    color="info" round
                    href={"/yamaha/product/product_detail?s="+data.id}
                >
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                </Button>
                <Button 
                    color="info" round
                    href={"/yamaha/cart/checkout?s="+data.id}
                >
                    <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
                </Button>
                </div>
            </div>
            </CardBody>
        </Card> */}
        <h1>Tes</h1>
        </div>
      );
    })
    const Productnaked = helmet.map((data) => {
      return (
        <div style={{padding: "20px", marginTop:"-40px"}}>   
        {/* <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
            <CardBody>
            <div style={{padding:"10px"}}>
                <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
                />
                <div align="center">
                <h5>{data.name}</h5>
                <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                <Button 
                    color="info" round
                    href={"/yamaha/product/product_detail?s="+data.id}
                >
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                </Button>
                <Button 
                    color="info" round
                    href={"/yamaha/cart/checkout?s="+data.id}
                >
                    <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
                </Button>
                </div>
            </div>
            </CardBody>
        </Card> */}
        <h1>Tes</h1>
        </div>
      );
    })
    const Productcbu = apparel.map((data) => {
    return (
        <div style={{padding: "20px", marginTop:"-40px"}}>   
        {/* <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
            <CardBody>
            <div style={{padding:"10px"}}>
                <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
                />
                <div align="center">
                <h5>{data.name}</h5>
                <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                <Button 
                    color="info" round
                    href={"/yamaha/product/product_detail?s="+data.id}
                >
                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                </Button>
                <Button 
                    color="info" round
                    href={"/yamaha/cart/checkout?s="+data.id}
                >
                    <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
                </Button>
                </div>
            </div>
            </CardBody>
        </Card> */}
        <h1>Tes</h1>
        </div>
      );
    })
    const Productasds = accessories.map((data) => {
        return (
            <div style={{padding: "20px", marginTop:"-40px"}}>   
            {/* <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
                <CardBody>
                <div style={{padding:"10px"}}>
                    <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
                    />
                    <div align="center">
                    <h5>{data.name}</h5>
                    <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                    <Button 
                        color="info" round
                        href={"/yamaha/product/product_detail?s="+data.id}
                    >
                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                    </Button>
                    <Button 
                        color="info" round
                        href={"/yamaha/cart/checkout?s="+data.id}
                    >
                        <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
                    </Button>
                    </div>
                </div>
                </CardBody>
            </Card> */}
            <h1>Tes</h1>
            </div>
          );
    })
    return (
    <Card className={classes.textCenter}>
        <div align="center">
            <CardHeader color="info">Product</CardHeader>
        </div>
        <CardBody>
            <div align="center">
            <h2>Product & Facilities</h2>
            </div>
            <GridContainer justify="center">
                <GridItem>
                <NavPills
                    alignCenter
                    color="primary"
                    tabs={[
                    {
                        tabButton: "YGP",
                        tabIcon: Motorcycle,
                        tabContent: (
                        <GridContainer justify="center">
                            {Productmaxi}
                        </GridContainer>
                        ),
                    },
                    {
                        tabButton: "Yamalube",
                        tabIcon: Motorcycle,
                        tabContent: (
                        <GridContainer justify="center">
                            {Productmatic}
                        </GridContainer>
                        ),
                    },
                    {
                        tabButton: "Helmet",
                        tabIcon: Motorcycle,
                        tabContent: (
                        <GridContainer justify="center">
                            {Productnaked}
                        </GridContainer>
                        ),
                    },
                    {
                        tabButton: "Apparel",
                        tabIcon: Motorcycle,
                        tabContent: (
                        <GridContainer justify="center">
                            {Productcbu}
                        </GridContainer>
                        ),
                    },
                    {
                        tabButton: "Accessories",
                        tabIcon: Motorcycle,
                        tabContent: (
                        <GridContainer justify="center">
                            {Productasds}
                        </GridContainer>
                        ),
                    },
                    ]}
                />
                </GridItem>
            </GridContainer>
        </CardBody>
    </Card>
    );
}

export default DataProduct;