import ReplayIcon from '@mui/icons-material/Replay';
import { AppBar, Backdrop, Box, Button, Grid, Stack, Toolbar, Typography } from '@mui/material';
import { FC } from 'react';
import { useData } from '../../contexts/DataContext';
import { useRouter } from '../../routers/Router';

const ListPage: FC = () => {
  const { navigate } = useRouter();
  const { list, isLoading, refresh } = useData();

  return (
    <Box>
      <AppBar position="sticky">
        <Toolbar>
          <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
            Files
          </Typography>
          <Button onClick={refresh}>
            <ReplayIcon htmlColor="white" fontSize="large" />
          </Button>
        </Toolbar>
      </AppBar>
      {isLoading ? (
        <Backdrop sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }} open>
          <Typography variant="h1">Loading...</Typography>
        </Backdrop>
      ) : (
        <Stack spacing={2}>
          {list.map((entry) => (
            <Grid
              key={entry.name}
              bgcolor="primary.main"
              onClick={() => navigate('/file', { entry })}
              container
              padding={1}
              height={73}
            >
              <Grid item xs={1} padding={0}>
                <img src={`data:image/png;base64,${entry.thumb}`} width={40} height={57} />
              </Grid>
              <Grid item xs={11} padding={0}>
                <Box display="flex" alignItems="center" height="100%">
                  <Typography variant="h5">{entry.name}</Typography>
                </Box>
              </Grid>
            </Grid>
          ))}
        </Stack>
      )}
    </Box>
  );
};

export default ListPage;
