import React from "react";

// nodejs library that concatenates classes
import classNames from "classnames";

// nodejs library to set properties for components
import PropTypes from "prop-types";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import makeStyles from "@material-ui/core/styles/makeStyles";
import Button from "@material-ui/core/Button";

// @material-ui/icons

// core components
import Cardstyles from "assets/jss/nextjs-material-kit/components/cardStyle.js";
import CardBodystyles from "assets/jss/nextjs-material-kit/components/cardBodyStyle.js";
import CardFooterstyles from "assets/jss/nextjs-material-kit/components/cardFooterStyle.js";
import CardHeaderstyles from "assets/jss/nextjs-material-kit/components/cardHeaderStyle.js";
import buttonStyle from "assets/jss/nextjs-material-kit/components/buttonStyle.js";

const CarduseStyles = makeStyles(Cardstyles);
const CardBodyuseStyles = makeStyles(CardBodystyles);
const CardFooteruseStyles = makeStyles(CardFooterstyles);
const CardHeaderuseStyles = makeStyles(CardHeaderstyles);
const makeComponentStyles = makeStyles(() => ({
    ...buttonStyle
}));

async function Card(props) {
    const classes = CarduseStyles();
    const { className, children, plain, carousel, ...rest } = props;
    const cardClasses = classNames({
        [classes.card]: true,
        [classes.cardPlain]: plain,
        [classes.cardCarousel]: carousel,
        [className]: className !== undefined
    });
    return (
        <div className={cardClasses} {...rest}>
        {children}
        </div>
    );
}

async function CardBody(props) {
    const classes = CardBodyuseStyles();
    const { className, children, ...rest } = props;
    const cardBodyClasses = classNames({
        [classes.cardBody]: true,
        [className]: className !== undefined
    });
    return (
        <div className={cardBodyClasses} {...rest}>
        {children}
        </div>
    );
}

async function CardFooter(props) {
    const classes = CardFooteruseStyles();
    const { className, children, ...rest } = props;
    const cardFooterClasses = classNames({
        [classes.cardFooter]: true,
        [className]: className !== undefined
        });
        return (
        <div className={cardFooterClasses} {...rest}>
            {children}
        </div>
    );
}

async function CardHeader(props) {
    const classes = CardHeaderuseStyles();
    const { className, children, color, plain, ...rest } = props;
    const cardHeaderClasses = classNames({
        [classes.cardHeader]: true,
        [classes[color + "CardHeader"]]: color,
        [classes.cardHeaderPlain]: plain,
        [className]: className !== undefined
        });
        return (
        <div className={cardHeaderClasses} {...rest}>
            {children}
        </div>
    );
}

Card.propTypes = {
    className: PropTypes.string,
    plain: PropTypes.bool,
    carousel: PropTypes.bool,
    children: PropTypes.node
};

CardBody.propTypes = {
    className: PropTypes.string,
    children: PropTypes.node
};

CardFooter.propTypes = {
    className: PropTypes.string,
    children: PropTypes.node
};

CardHeader.propTypes = {
    className: PropTypes.string,
    color: PropTypes.oneOf(["warning", "success", "danger", "info", "primary"]),
    plain: PropTypes.bool,
    children: PropTypes.node
};

module.exports = {
	Card: Card,
    CardBody: CardBody,
    CardFooter: CardFooter,
    CardHeader: CardHeader,
};