// @mui
import { Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
// hooks
import useSettings from '../hooks/useSettings';
// components
import Page from '../components/Page';
import axios from '../utils/axios';
import useAuth from '../hooks/useAuth';
import SomethingUsage from '../sections/dashboard/SomethingUsage';
import { fCurrency } from '../utils/formatNumber';

// ----------------------------------------------------------------------

export default function Dashboard() {
  const { themeStretch } = useSettings();

  const { logout } = useAuth();
  
  const loadSomething = () => {
    axios.get('/user')
  };

  const DangerCard = styled(Card)(({ theme }) => ({
    boxShadow: 'none',
    padding: theme.spacing(3),
    color: theme.palette.error.main,
    backgroundColor: theme.palette.error.lighter,
  }));

  const SuccessCard = styled(Card)(({ theme }) => ({
    boxShadow: 'none',
    padding: theme.spacing(3),
    color: theme.palette.success.darker,
    backgroundColor: theme.palette.success.lighter,
  }));

  return (
    <Page title="Dashboard">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Typography variant="h3" component="h1" paragraph>
          Dashboard
        </Typography>

        <Grid container spacing={2}>
          <Grid item xs={6}>
            <SomethingUsage />
          </Grid>
          <Grid item xs={6}>
            <DangerCard>
              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
                <Typography sx={{ typography: 'subtitle2' }}>This Month Usages </Typography>
                <Typography>{fCurrency(15000000)} (57)</Typography>
              </Stack>
            </DangerCard>
            <br />
            <SuccessCard>
              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
                <Typography sx={{ typography: 'subtitle2' }}>Remaining Balance Estimation </Typography>
                <Typography>November 2022</Typography>
              </Stack>
            </SuccessCard>
          </Grid>
        </Grid>
      </Container>
    </Page>
  );
}