import React, { useState } from "react";
import PropTypes from "prop-types";
import styles from "./styles";
import { makeStyles } from "@material-ui/core/styles";
import {
  Card,
  CardHeader,
  CardContent,
  CardActions,
  Collapse,
  Avatar,
  IconButton
} from "@material-ui/core";
import clsx from "clsx";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

const useStyles = makeStyles(styles);

const ExpandableCard = ({
  Icon,
  iconVariant,
  title,
  subtitle,
  smallHeader,
  expandable,
  Summary,
  Actions,
  Content
}) => {
  const [expanded, setExpanded] = useState(false);

  const classes = useStyles();

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  return (
    <Card>
      <CardHeader
        avatar={
          <Avatar
            aria-label="recipe"
            className={smallHeader ? classes.avatarSmall : classes.avatar}
            variant={iconVariant || "circular"}
          >
            {Icon}
          </Avatar>
        }
        action={
          <>
            {expandable && (
              <IconButton
                className={clsx(classes.expand, {
                  [classes.expandOpen]: expanded
                })}
                onClick={handleExpandClick}
                aria-expanded={expanded}
                aria-label="show more"
                size={smallHeader ? "small" : "medium"}
              >
                <ExpandMoreIcon />
              </IconButton>
            )}
          </>
        }
        title={<strong>{title}</strong>}
        subheader={subtitle}
      />
      {Summary && <CardContent>{Summary}</CardContent>}
      {Actions && <CardActions>{Actions}</CardActions>}
      {expandable && Content && (
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <CardContent>{Content}</CardContent>
        </Collapse>
      )}
    </Card>
  );
};

ExpandableCard.defaultProps = {
  expandable: true
};

ExpandableCard.propTypes = {
  Icon: PropTypes.node.isRequired,
  iconVariant: PropTypes.oneOf(["circular", "rounded", "square"]),
  title: PropTypes.string.isRequired,
  subtitle: PropTypes.string,
  smallHeader: PropTypes.bool,
  expandable: PropTypes.bool,
  Summary: PropTypes.node,
  Actions: PropTypes.node,
  Content: PropTypes.node
};

export default ExpandableCard;
