import React from 'react';
import {
  withStyles,
  Card,
  CardContent,
  CardHeader,
  CardActions,
  Typography,
} from 'material-ui';
import PropTypes from 'prop-types';

import chartCardStyle from 'variables/styles/chartCardStyle';

/* eslint-disable no-nested-ternary */

function ChartCard({ ...props }) {
  const {
    classes,
    chartColor,
    statIconColor,
    chart,
    title,
    text,
    statLink,
    statText,
  } = props;
  return (
    <Card className={classes.card}>
      <CardHeader
        className={`${classes.cardHeader} ${
          classes[`${chartColor}CardHeader`]
        }`}
        subheader={chart}
      />
      <CardContent className={classes.cardContent}>
        <Typography
          variant="title"
          component="h4"
          className={classes.cardTitle}
        >
          {title}
        </Typography>
        <Typography component="p" className={classes.cardCategory}>
          {text}
        </Typography>
      </CardContent>
      <CardActions className={classes.cardActions}>
        <div className={classes.cardStats}>
          <props.statIcon
            className={`${classes.cardStatsIcon} ${
              classes[`${statIconColor}CardStatsIcon`]
            }`}
          />{' '}
          {statLink !== undefined ? (
            <a href={statLink.href} className={classes.cardStatsLink}>
              {statLink.text}
            </a>
          ) : statText !== undefined ? (
            statText
          ) : null}
        </div>
      </CardActions>
    </Card>
  );
}

ChartCard.defaultProps = {
  statIconColor: 'gray',
  chartColor: 'purple',
};

ChartCard.propTypes = {
  classes: PropTypes.object.isRequired,
  chart: PropTypes.object.isRequired,
  title: PropTypes.node,
  text: PropTypes.node,
  statIcon: PropTypes.func.isRequired,
  statIconColor: PropTypes.oneOf([
    'warning',
    'primary',
    'danger',
    'success',
    'info',
    'rose',
    'gray',
  ]),
  chartColor: PropTypes.oneOf(['orange', 'green', 'red', 'blue', 'purple']),
  statLink: PropTypes.object,
  statText: PropTypes.node,
};

export default withStyles(chartCardStyle)(ChartCard);
