import { useTheme } from '@mui/material';
import ButtonBase from '@mui/material/ButtonBase';
import Stack from '@mui/material/Stack';
import { Document, Page } from '@src/config/react-pdf';
import times from 'lodash/times';

import { usePdfVisualizer } from '../../context';

const ThumbnailsContent = () => {
  const theme = useTheme();
  const { file, totalPages, currentPage, scrollToPage, changePage } =
    usePdfVisualizer();

  const handleThumbnailClick = (page: number) => {
    changePage(page);
    scrollToPage(page);
  };

  return (
    <Stack sx={{ alignItems: 'center', py: 2, px: 3 }}>
      <Document
        file={file}
        loading=""
        error=""
      >
        {times(totalPages, index => {
          const page = index + 1;
          const isActive = currentPage === page;

          return (
            <ButtonBase
              key={`thumbnail-page-${page}`}
              onClick={() => handleThumbnailClick(page)}
              sx={{
                borderRadius: 1,
                mb: 2,
                border: `1px solid ${
                  isActive
                    ? theme.palette.newBase?.brand[400]
                    : theme.palette.grey[300]
                }`,
                overflow: 'hidden',
                transition: 'border-color 0.2s ease',
                '&:hover': {
                  borderColor: isActive
                    ? theme.palette.newBase?.brand[400]
                    : theme.palette.grey[400],
                },
              }}
            >
              <Page
                pageNumber={page}
                width={212}
                loading=""
              />
            </ButtonBase>
          );
        })}
      </Document>
    </Stack>
  );
};

export default ThumbnailsContent;
