import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import ResourceCard from './resourceCard';
import Typography from '@material-ui/core/Typography';


const useStyles = makeStyles(theme => ({
    grid: {
        display: "flex"
    }
}));

const agri = [66, 3, 4, 5, 6, 7, 8, 9, 40, 72, 106]
const construct = [101, 102, 103, 104, 105, 107, 108, 109, 110, 111]
const fashion = [41, 46, 60, 61, 62, 63, 64, 65, 70, 71]
const energy = [10, 11, 12, 1, 73, 74, 83]
const electronics = [20, 21, 22, 23, 24, 25, 26, 27, 28, 79, 98]
const auto = [47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 112]
const aero = [77, 78, 80, 81, 82, 84, 85, 86, 87, 88, 89]
const resource = [2, 13, 14, 15, 16, 17, 18, 19, 42, 43, 44, 45, 68, 69, 75, 76]
const research = [29, 30, 31, 32, 33, 34, 35, 58, 59, 100, 113]


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

    const loadResources = async () => {
        var resourceJSON = await fetch("/simcompanies/API/resourcelist");
        resourceJSON = await resourceJSON.json();
        let rArr = [[], [], [], [], [], [], [], [], [], []];
        for (let i = 0; i < resourceJSON.length; i++) {
            if (agri.includes(resourceJSON[i]["db_letter"])) {
                rArr[0].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
            } else if (construct.includes(resourceJSON[i]["db_letter"])) {
                rArr[1].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
            } else if (fashion.includes(resourceJSON[i]["db_letter"])) {
                rArr[2].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
            } else if (energy.includes(resourceJSON[i]["db_letter"])) {
                rArr[3].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
            } else if (electronics.includes(resourceJSON[i]["db_letter"])) {
                rArr[4].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
            } else if (auto.includes(resourceJSON[i]["db_letter"])) {
                rArr[5].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
            } else if (aero.includes(resourceJSON[i]["db_letter"])) {
                rArr[6].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
            } else if (resource.includes(resourceJSON[i]["db_letter"])) {
                rArr[7].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
            } else if (research.includes(resourceJSON[i]["db_letter"])) {
                rArr[8].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
            } else {
                rArr[9].push(<ResourceCard resource={resourceJSON[i]}></ResourceCard>);
            }

        }
        setResources(rArr);
    }

    if (resources.length === 0)
        loadResources();

    return (

        <Grid container spacing={2} >
            <Grid item xs={12} className={classes.grid}>
                <Grid container spacing={2} >
                    <Grid item xs={12}>
                        <Typography variant="h4">
                            Agriculture & Food
                </Typography>
                    </Grid>
                    <Grid item xs={12} className={classes.grid}>
                        <Grid container spacing={1} >
                            {resources[0]}
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
            <Grid item xs={12} className={classes.grid}>
                <Grid container spacing={2} >
                    <Grid item xs={12}>
                        <Typography variant="h4">
                            Construction
                </Typography>
                    </Grid>
                    <Grid item xs={12} className={classes.grid}>
                        <Grid container spacing={1} >
                            {resources[1]}
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
            <Grid item xs={12} className={classes.grid}>
                <Grid container spacing={2} >
                    <Grid item xs={12}>
                        <Typography variant="h4">
                            Fashion
                </Typography>
                    </Grid>
                    <Grid item xs={12} className={classes.grid}>
                        <Grid container spacing={1} >
                            {resources[2]}
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
            <Grid item xs={12} className={classes.grid}>
                <Grid container spacing={2} >
                    <Grid item xs={12}>
                        <Typography variant="h4">
                            Energy
                </Typography>
                    </Grid>
                    <Grid item xs={12} className={classes.grid}>
                        <Grid container spacing={1} >
                            {resources[3]}
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
            <Grid item xs={12} className={classes.grid}>
                <Grid container spacing={2} >
                    <Grid item xs={12}>
                        <Typography variant="h4">
                            Electronics
                </Typography>
                    </Grid>
                    <Grid item xs={12} className={classes.grid}>
                        <Grid container spacing={1} >
                            {resources[4]}
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
            <Grid item xs={12} className={classes.grid}>
                <Grid container spacing={2} >
                    <Grid item xs={12}>
                        <Typography variant="h4">
                            Automotive
                </Typography>
                    </Grid>
                    <Grid item xs={12} className={classes.grid}>
                        <Grid container spacing={1} >
                            {resources[5]}
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
            <Grid item xs={12} className={classes.grid}>
                <Grid container spacing={2} >
                    <Grid item xs={12}>
                        <Typography variant="h4">
                            Aerospace
                </Typography>
                    </Grid>
                    <Grid item xs={12} className={classes.grid}>
                        <Grid container spacing={1} >
                            {resources[6]}
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
            <Grid item xs={12} className={classes.grid}>
                <Grid container spacing={2} >
                    <Grid item xs={12}>
                        <Typography variant="h4">
                            Resources
                </Typography>
                    </Grid>
                    <Grid item xs={12} className={classes.grid}>
                        <Grid container spacing={1} >
                            {resources[7]}
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
            <Grid item xs={12} className={classes.grid}>
                <Grid container spacing={2} >
                    <Grid item xs={12}>
                        <Typography variant="h4">
                            Research
                </Typography>
                    </Grid>
                    <Grid item xs={12} className={classes.grid}>
                        <Grid container spacing={1} >
                            {resources[8]}
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
            <Grid item xs={12} className={classes.grid}>
                <Grid container spacing={2} >
                    <Grid item xs={12}>
                        <Typography variant="h4">
                            Others
                </Typography>
                    </Grid>
                    <Grid item xs={12} className={classes.grid}>
                        <Grid container spacing={1} >
                            {resources[9]}
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </Grid>

    );
}