import React, { useState } from 'react'
import { Box, Button, Typography, Grid, Paper } from '@mui/material'
import { GrManual } from 'react-icons/gr'
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack5'
import { FaAngleDoubleLeft, FaAngleDoubleRight } from 'react-icons/fa'
import pdfUrl from '../assets/manuel.pdf'
import classe from '../assets/AllStyleComponents.module.css'
import classeAdd from '../assets/AddStudent.module.css'
import classeHome from '../assets/Home.module.css'

const Manuel = () => {
  const [numPages, setNumPages] = useState(null) // Use correct name
  const [pageNumber, setPageNumber] = useState(1)

  // Fix the onDocumentSuccess function
  function onDocumentSuccess({ numPages }) {
    setNumPages(numPages) // Use the correct property
  }

  const prevPage = () => {
    if (pageNumber > 1) {
      setPageNumber(pageNumber - 1)
    }
  }

  const nextPage = () => {
    if (pageNumber < numPages) {
      setPageNumber(pageNumber + 1)
    }
  }

  return (
    <div className={classe.mainHome}>
      <div className={classeAdd.header}>
        <div className={classe.h1style}>
          <div className={classeHome.blockTitle}>
            <h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
              <GrManual /> Manuel d'utilisation
            </h1>
          </div>
        </div>
      </div>
      <Paper
        sx={{
          height: 'auto',
          minHeight: 500,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
          width: '100%'
        }}
      >
        <Grid sx={{ display: 'flex', gap: '20px', padding: '1%' }}>
          <Button color="warning" variant="contained" onClick={prevPage}>
            <FaAngleDoubleLeft />
          </Button>
          <Button color="warning" variant="contained" onClick={nextPage}>
            <FaAngleDoubleRight />
          </Button>
        </Grid>

        <Typography variant="h6">
          Page {pageNumber} sur {numPages}
        </Typography>

        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '100%'
          }}
        >
          <Document
            file={pdfUrl}
            onLoadSuccess={onDocumentSuccess}
            loading={<div>Chargement du Manuel...</div>}
            error={<div>Une erreur s'est produite lors du chargement du Manuel.</div>}
          >
            <Page pageNumber={pageNumber} width={1200} />
          </Document>
        </div>

        <Grid sx={{ display: 'flex', gap: '20px', padding: '1%' }}>
          <Button color="warning" variant="contained" onClick={prevPage}>
            <FaAngleDoubleLeft />
          </Button>
          <Button color="warning" variant="contained" onClick={nextPage}>
            <FaAngleDoubleRight />
          </Button>
        </Grid>
      </Paper>
    </div>
  )
}

export default Manuel
