import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import { Link } from 'react-router-dom';
import Link1 from '@material-ui/core/Link';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import CardMedia from '@material-ui/core/CardMedia';


const useStyles = makeStyles(theme => ({
    picture: {

    }
}));
function ListItemLink(props) {
    return <ListItem button component={Link1} {...props} />;
}

export default function ResourceCard(props) {
    const classes = useStyles();
    const [picture, setPicture] = React.useState(null);

    var picUrl = "https://d1fxy698ilbz6u.cloudfront.net/static/" + props.resource["image"]


    const loadResourcePicture = async () => {
        await fetch(picUrl).then(res => { return res.blob() }).then(blob => {
            var img = URL.createObjectURL(blob);
            setPicture(img);

        })


    }

    if (picture === null)
        loadResourcePicture();

    return (

        <Grid item xs={4} lg={2} key={props.resource["name"]}>
            <Card >
                <CardContent style={{ padding: 0 }}>
                    <ListItemLink to={"/resourcechart/" + props.resource["db_letter"]} component={Link}>
                        <img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
                        <ListItemText primary={props.resource["name"]} />
                    </ListItemLink>
                </CardContent>
            </Card>
        </Grid>

    );
}