import { Stack } from '@mui/material';

import Paginator from './components/Paginator';
import Sidebar from './components/Sidebar';
import ViewerArea from './components/ViewerArea';
import { DEFAULT_BASE_WIDTH } from './constants';
import { PdfVisualizerProvider } from './context';
import { type PdfVisualizerProps } from './types';

/**
 * PdfVisualizer - A comprehensive PDF viewer component with pagination,
 * zoom controls, and a collapsible sidebar with page thumbnails.
 *
 * Features:
 * - Page navigation with editable input
 * - Zoom in/out controls
 * - Vertical scroll through all pages
 * - Collapsible sidebar with page thumbnails
 * - Click on thumbnail to navigate to page
 */

const PdfVisualizer = ({
  file,
  defaultPage = 1,
  onFinishRead,
  slotProps,
  sx,
}: PdfVisualizerProps) => {
  const { sidebar, pdfDimensions } = slotProps || {};
  const { show: showSidebar = true, defaultExpanded = false } = sidebar || {};
  const { baseWidth } = pdfDimensions || {};

  return (
    <PdfVisualizerProvider
      file={file}
      defaultPage={defaultPage}
      baseWidth={baseWidth}
      onFinishRead={onFinishRead}
    >
      <Stack sx={{ width: '100%', height: '100%', ...sx }}>
        <Paginator />

        <Stack
          sx={{
            flexDirection: 'row',
            width: '100%',
            height: '100%',
            overflow: 'auto',
          }}
        >
          <ViewerArea />

          {showSidebar && <Sidebar defaultExpanded={defaultExpanded} />}
        </Stack>
      </Stack>
    </PdfVisualizerProvider>
  );
};

export default PdfVisualizer;