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';


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

    }
}));

function CreateResourceCard(resource, classes) {
    function ListItemLink(props) {
        return <ListItem button component={Link1} {...props} />;
    }
    return (
        <Grid item xs={4} lg={2} >
            <Card >
                <CardContent style={{ padding: 0 }}>
                    <ListItemLink to={"/resourcechart/" + resource["db_letter"]} component={Link}>
                        <ListItemText primary={resource["name"]} />
                    </ListItemLink>
                </CardContent>
            </Card>
        </Grid>

    )
}

export default function SelectResource() {
    const classes = useStyles();
    const [resources, setResources] = React.useState(null);

    const loadResources = async () => {
        var resourceJSON = await fetch("/API/resourcelist");
        resourceJSON = await resourceJSON.json();
        let rArr = [];
        for (let i = 0; i < resourceJSON.length; i++) {
            rArr.push(CreateResourceCard(resourceJSON[i], classes));
        }
        setResources(rArr);
    }

    if (resources === null)
        loadResources();

    return (

        <Grid container spacing={2}>
            {resources}
        </Grid>

    );
}