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

const ListPage: FC = () => {
  const { navigate, getProps } = useRouter();
  const { list, isLoading, refresh } = useData();
  const { path: _path } = getProps() as { path: string };

  const [path, setPath] = useState(_path ?? '/');

  return (
    <Box>
      <AppBar position="sticky">
        <Toolbar>
          {path != '/' ? (
            <>
              <Button
                startIcon={<BackIcon htmlColor="white" />}
                onClick={() => {
                  setPath((prev) => {
                    let newPath = prev.split('/').slice(0, -2).join('/') + '/';
                    if (newPath === '/') newPath = '/';
                    refresh(newPath);
                    return newPath;
                  });
                }}
              >
                <Typography variant="h5" color="#fff">
                  Back
                </Typography>
              </Button>
              <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
                {path.split('/').slice(-2, -1)}
              </Typography>
            </>
          ) : (
            <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
              Files
            </Typography>
          )}
          <Button onClick={() => refresh(path)}>
            <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={() => {
                if (entry.type === 'directory') {
                  setPath(`${path}${entry.name}/`);
                  refresh(`${path}${entry.name}/`);
                }
                if (entry.type === 'file') navigate('/file', { path, entry });
              }}
              container
              padding={1}
              height={73}
            >
              {entry.type === 'file' && (
                <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>
              {entry.type === 'directory' && (
                <Grid item xs={1} padding={0} display="flex" alignItems="center">
                  <NavigateNextIcon htmlColor="white" fontSize="large" />
                </Grid>
              )}
            </Grid>
          ))}
        </Stack>
      )}
    </Box>
  );
};

export default ListPage;