import React from 'react';
import { Link } from "react-router-dom";
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import OpenInNew from '@material-ui/icons/OpenInNew';
import fontSize from '@edma/design-tokens/tokens/js/fontSize';

const useStyles = makeStyles ({
    card: {
        margin: 10,
        display: 'grid',
        flexGrow: 1,
        flexBasis: 600,
    },
    title: {
        fontSize: fontSize['1'],
        margin: 20,
    },
    media: {
        height: 140,
    },
    actions: {
        alignSelf: 'flex-end',
    },
    anchor: {
        textDecoration: 'none',
        width: '100%',
    },
    openInNew: {
        width: '15px',
        marginLeft: '0.5rem',
    }
});

export default function SimpleCard(props) {
    const custom = useStyles();

    const cardContent = (
        <CardActionArea>
            <Typography className={custom.title} color="textSecondary" gutterBottom>
                {props.title !== undefined ? props.title : 'Title'}
            </Typography>
            <CardMedia
                className={custom.media}
                image={props.image !== undefined ? props.image : null}
                alt={props.title !== undefined ? props.title : 'Img'}
            />
        </CardActionArea>
    );

    return (
        <Card className={custom.card}>
            {props.ext ?
                <a className={custom.anchor} href={props.url} target={props.target} rel="noopener noreferrer">
                    {cardContent}
                </a> :
                <Link className={custom.anchor} to={props.url}>
                    {cardContent}
                </Link>
            }
            <CardContent>
                <Typography variant="body2" component="h2">
                    {props.sub !== undefined ? props.sub : 'Sub'}
                </Typography>
            </CardContent>
            <CardActions className={custom.actions}>
                {props.ext ?
                    <a className={custom.anchor} href={props.url} target={props.target} rel="noopener noreferrer">
                        <Button size="large" fullWidth color="primary" variant="contained">
                            {props.cta !== undefined ? props.cta : 'Click Here'}
                            <OpenInNew className={custom.openInNew} />
                        </Button>
                    </a> :
                    <Link className={custom.anchor} to={props.url}>
                        <Button size="large" fullWidth color="primary" variant="contained">
                            {props.cta !== undefined ? props.cta : 'Click Here'}
                        </Button>
                    </Link>
                }
            </CardActions>
        </Card>
    );
}
