import * as React from 'react';

import 'typeface-roboto';

import { createMuiTheme, makeStyles, Theme, ThemeProvider } from '@material-ui/core/styles';

import CssBaseline from '@material-ui/core/CssBaseline';
import Drawer from '@material-ui/core/Drawer';

import { Library } from './library';

const drawerWidth = 240;

const useStyles = makeStyles((theme: Theme) => ({
	root: {
		display: 'flex',
	},
	drawer: {
		width: drawerWidth,
		flexShrink: 0,
	},
	drawerPaper: {
		width: drawerWidth,
	},
	content: {
		flexGrow: 1,
		padding: theme.spacing(3),
	},
}));

function EditorLayout(): JSX.Element {
	const classes = useStyles();

	return (
		<div className={classes.root}>
			<CssBaseline />
			<Drawer
				className={classes.drawer}
				variant='permanent'
				classes={{
					paper: classes.drawerPaper,
				}}
				anchor='left'
			></Drawer>
			<main className={classes.content}>
				<Library />
			</main>
		</div>
	);
}

const theme = createMuiTheme({
	palette: {
		type: 'dark',
	},
});

export function Editor(): JSX.Element {
	return (
		<ThemeProvider theme={theme}>
			<EditorLayout />
		</ThemeProvider>
	);
}