import { useCallback, useRef } from 'react';

import Stack from '@mui/material/Stack';
import { Page } from '@src/config/react-pdf';
import { fadeIn } from '@utils/animations';

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

import { type PdfPageProps } from './types';

const PdfPage = ({ pageNumber }: PdfPageProps) => {
  const { zoom, pageWidth, registerPageRef } = usePdfVisualizer();

  const containerRef = useRef<HTMLDivElement | null>(null);

  const setRefs = useCallback(
    (node: HTMLDivElement | null) => {
      containerRef.current = node;
      registerPageRef(pageNumber, node);
    },
    [pageNumber, registerPageRef],
  );

  return (
    <Stack
      ref={setRefs}
      sx={{
        mb: 2,
        boxShadow: 1,
        backgroundColor: theme => theme.palette.new.background.layout.tertiary,
        animation: `${fadeIn} 0.3s ease`,
      }}
    >
      <Page
        pageNumber={pageNumber}
        width={pageWidth}
        scale={zoom}
        loading=""
      />
    </Stack>
  );
};

export default PdfPage;
