import React from 'react';

import { makeStyles, styled } from '@mui/styles';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';

import SideBar from '../components/SideBar';

import ConnectWallet from '../components/ConnectWallet';
import { Box } from '@mui/material';
import { throttle } from '../src/utils';
import { triggerSync } from '../api/bbgo';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    display: 'flex',
  },
  content: {
    flexGrow: 1,
    height: '100vh',
    overflow: 'auto',
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  appBarSpacer: theme.mixins.toolbar,
  container: {},
  toolbar: {
    justifyContent: 'space-between',
  },
}));

const ToolbarButton = styled('button')(({ theme }) => ({
  padding: theme.spacing(1),
}));

function SyncButton() {
  const handleClick = throttle(async () => {
    await triggerSync();
  }, 2000);

  return <ToolbarButton onClick={handleClick}>Sync</ToolbarButton>;
}

export default function DashboardLayout({ children }) {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar className={classes.appBar}>
        <Toolbar className={classes.toolbar}>
          <Typography variant="h6" className={classes.title}>
            BBGO
          </Typography>
          <Box sx={{ flexGrow: 1 }} />
          <SyncButton />
          <ConnectWallet />
        </Toolbar>
      </AppBar>

      <SideBar />

      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        <Container
          className={classes.container}
          maxWidth={false}
          disableGutters={true}
        >
          {children}
        </Container>
      </main>
    </div>
  );
}