import React from 'react';
import { Typography, Button } from '@material-ui/core';
import appConstants from '../../appConstants';

const EntityIcon = ({ entity, history }) => {
    const { id, name } = entity;
    return (
        <Button variant="contained" color="primary" size="large" onClick={() => history.push(`/${id}/new`)} css={{ margin: 16 }}>
            {name}
        </Button>
    );
};

export default ({ history }) => {
    return (
        <div
            css={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                flexDirection: 'column',
                height: '100vh',
                paddingBottom: 200
            }}>
            <Typography variant="h2" component="h1">
                Create new
            </Typography>
            <div css={{ display: 'flex', marginTop: 32, flexWrap: 'wrap', justifyContent: 'center', minWidth: 'calc(60vw - 240px)' }}>
                {appConstants.entities.map((entity) => (
                    <EntityIcon key={entity.id} entity={entity} history={history} />
                ))}
            </div>
        </div>
    );
};