import React, { useState } from 'react';
import { Typography, makeStyles, Collapse, Divider } from '@material-ui/core';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => {
    var _a;
    return ({
        root: {
            '&:hover': {
                backgroundColor: theme.palette.secondary.main,
                color: (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.getContrastText(theme.palette.secondary.main)
            }
        },
        title: {
            lineHeight: 1.2,
            marginBottom: theme.spacing(1.5)
        },
        number: {
            marginRight: 16,
            paddingLeft: 16
        },
        divider: {
            width: '100%',
            marginTop: 16
        }
    });
});
export const NewsCard = ({ number, title, summary, width, component = 'h2' }) => {
    const [expanded, setExpanded] = useState(false);
    const classes = useStyles();
    return (React.createElement("div", { className: classes.root, style: { cursor: summary.length > 56 && 'pointer' }, onClick: () => setExpanded(!expanded) }, React.createElement("div", { style: {
            width: width === 'double' ? 560 : 260,
            display: 'flex',
            marginTop: 16,
            paddingRight: 16
        } }, React.createElement("div", { className: classes.number }, React.createElement(Typography, { variant: "h2" }, number)), React.createElement("div", null, React.createElement("div", null, React.createElement(Typography, { variant: "subtitle2", component: component, className: classes.title }, title), React.createElement(Typography, { style: { minHeight: width !== 'double' && 40 } }, summary.slice(0, 57), " ", summary.length > 56 && !expanded && '...')), React.createElement(Collapse, { in: expanded, timeout: "auto", unmountOnExit: true }, React.createElement("div", null, React.createElement(Typography, null, summary.slice(57)))))), React.createElement(Divider, { className: classes.divider })));
};
NewsCard.propTypes = {
    /**
     * Number listed by news item
     */
    number: PropTypes.number.isRequired,
    /**
     * Title of news item
     */
    title: PropTypes.string.isRequired,
    /**
     * Header Tag override. Defaults to H2
     */
    component: PropTypes.string,
    /**
     * Summary of news item (overflow beyond 56 characters is sent to expanded content area)
     */
    summary: PropTypes.string.isRequired,
    /**
     * Optional width flag. width === double will set the card to full width
     */
    width: PropTypes.string
};
NewsCard.defaultProps = {
    component: 'h2'
};
//# sourceMappingURL=NewsCard.js.map