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,
    rconcept,
    mtx, 
    extreme, 
    ranger, 
    fighter, 
    swirl, 
    classic, 
    uno,
    apparel,
    asia, 
    basic,
    merchand, 
    maxi, 
    rainsuit, 
    motogp, 
    offroad,
    accessories, ...props })  {
    console.log(rconcept);
    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"}}>
                        <img style={{ width: "150px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses}
                        />
                        <div align="center">
                        <h5>{data.name}</h5>
                        <h5>
                            <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                        </h5><br/>
                        <Button 
                            color="info" round
                            href={"/yamaha/product/ygp_detail?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>{data.name}</h5>
                        <h5>
                            <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                        </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 HelmetRConcepts = rconcept.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>{data.name}</h5>
                        <h5>
                            <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                        </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 HelmetMTX = mtx.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>{data.name}</h5>
                    <h5>
                        <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                    </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 HelmetExtreme = extreme.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>{data.name}</h5>
                    <h5>
                        <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                    </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 HelmetRanger = ranger.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>{data.name}</h5>
                    <h5>
                        <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                    </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 HelmetFighter = fighter.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>{data.name}</h5>
                    <h5>
                        <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                    </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 HelmetSwirl = swirl.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>{data.name}</h5>
                    <h5>
                        <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                    </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 HelmetClassic = classic.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>{data.name}</h5>
                    <h5>
                        <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                    </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 HelmetUno = uno.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>{data.name}</h5>
                    <h5>
                        <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                    </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 ApparelRConcept = 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>{data.name}</h5>
                    <h5>
                        <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                    </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 ApparelAsia = asia.map((data) => {
        return (   
        <div style={{padding: "20px", marginTop:"-40px"}}>   
        <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
            <CardBody>
            <div style={{padding:"10px"}}>
                <img
                    alt="..."
                    style={{ height: "150px", display: "block" }}
                    src={`${backend}${data.img["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/apparel_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>{data.name}</h5>
                    <h5>
                        <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                    </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>Sparepart & Accessories</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: (
                            <div>
                                <div align="center">
                                    <div align="center" className={classes.section} id="notifications">
                                        <SnackbarContent
                                        message={
                                            <h4>R CONCEPT</h4>
                                        }
                                        align="center"
                                        color="info"
                                        />
                                    </div>
                                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                                        {HelmetRConcepts}
                                    </GridContainer>
                                </div><br></br><br></br>
                                <div align="center" style={{marginTop:"-50px"}}>
                                    <div align="center" className={classes.section} id="notifications">
                                        <SnackbarContent
                                        message={
                                            <h4>MTX</h4>
                                        }
                                        align="center"
                                        color="info"
                                        />
                                    </div>
                                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                                        {HelmetMTX}
                                    </GridContainer>
                                </div><br></br><br></br>
                                <div align="center" style={{marginTop:"-50px"}}>
                                    <div align="center" className={classes.section} id="notifications">
                                        <SnackbarContent
                                        message={
                                            <h4>Extreme</h4>
                                        }
                                        align="center"
                                        color="info"
                                        />
                                    </div>
                                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                                        {HelmetExtreme}
                                    </GridContainer>
                                </div><br></br><br></br>
                                <div align="center" style={{marginTop:"-50px"}}>
                                    <div align="center" className={classes.section} id="notifications">
                                        <SnackbarContent
                                        message={
                                            <h4>Ranger</h4>
                                        }
                                        align="center"
                                        color="info"
                                        />
                                    </div>
                                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                                        {HelmetRanger}
                                    </GridContainer>
                                </div><br></br><br></br>
                                <div align="center" style={{marginTop:"-50px"}}>
                                    <div align="center" className={classes.section} id="notifications">
                                        <SnackbarContent
                                        message={
                                            <h4>Fighter</h4>
                                        }
                                        align="center"
                                        color="info"
                                        />
                                    </div>
                                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                                        {HelmetFighter}
                                    </GridContainer>
                                </div><br></br><br></br>
                                <div align="center" style={{marginTop:"-50px"}}>
                                    <div align="center" className={classes.section} id="notifications">
                                        <SnackbarContent
                                        message={
                                            <h4>Swirl</h4>
                                        }
                                        align="center"
                                        color="info"
                                        />
                                    </div>
                                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                                        {HelmetSwirl}
                                    </GridContainer>
                                </div><br></br><br></br>
                                <div align="center" style={{marginTop:"-50px"}}>
                                    <div align="center" className={classes.section} id="notifications">
                                        <SnackbarContent
                                        message={
                                            <h4>Classic</h4>
                                        }
                                        align="center"
                                        color="info"
                                        />
                                    </div>
                                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                                        {HelmetClassic}
                                    </GridContainer>
                                </div><br></br><br></br>
                                <div align="center" style={{marginTop:"-50px"}}>
                                    <div align="center" className={classes.section} id="notifications">
                                        <SnackbarContent
                                        message={
                                            <h4>Uno</h4>
                                        }
                                        align="center"
                                        color="info"
                                        />
                                    </div>
                                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                                        {HelmetUno}
                                    </GridContainer>
                                </div><br></br><br></br>
                            </div>
                        ),
                    },
                    {
                        tabButton: "Apparel",
                        tabIcon: Motorcycle,
                        tabContent: (
                            <div>
                                <div align="center">
                                    <div align="center" className={classes.section} id="notifications">
                                        <SnackbarContent
                                        message={
                                            <h4>R Concept Apprael</h4>
                                        }
                                        align="center"
                                        color="info"
                                        />
                                    </div>
                                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                                        {ApparelRConcept}
                                    </GridContainer>
                                </div><br></br><br></br>
                                <div align="center">
                                    <div align="center" className={classes.section} id="notifications">
                                        <SnackbarContent
                                        message={
                                            <h4>46 Asia</h4>
                                        }
                                        align="center"
                                        color="info"
                                        />
                                    </div>
                                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
                                        {ApparelAsia}
                                    </GridContainer>
                                </div><br></br><br></br>
                            </div>
                        ),
                    },
                    {
                        tabButton: "Accessories",
                        tabIcon: Motorcycle,
                        tabContent: (
                        <GridContainer justify="center">
                            {Accessories}
                        </GridContainer>
                        ),
                    },
                    ]}
                />
                </GridItem>
            </GridContainer>
        </CardBody>
    </Card>
    );
}

export default DataProduct;