konstitisyon.nu/components/konstitisyon/index.js

'use client'
import PropTypes from 'prop-types'
import {useState} from 'react'
import Box from '@mui/material/Box'
import Paper from '@mui/material/Paper'
import {styled} from '@mui/material/styles'
import IconButton from '@mui/material/IconButton'
import AddCommentIcon from '@mui/icons-material/AddComment'
import CommentIcon from '@mui/icons-material/Comment'
import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
import AuthAlert from '../auth-form/auth-alert.js'
import Titre from './titre.js'
import Article from './article.js'
import HandleComments from './handle-comments.js'
import CommentsList from './comments-list.js'
import {formatKonstitisyon} from '@/lib/format.js'

const LightTooltip = styled(({className, ...props}) => (
  <Tooltip {...props} classes={{popper: className}} />
))(({theme}) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: theme.palette.common.white,
    color: 'rgba(0, 0, 0, 0.87)',
    boxShadow: theme.shadows[1],
    fontSize: 15,
  },
}))

export default function Konstitisyon({session, titres, articles}) {
  const konstitisyon = formatKonstitisyon(titres, articles)
  const [isWriteCommentsOpen, setIsWriteCommentsOpen] = useState(false)
  const [isReadCommentsOpen, setIsReadCommentsOpen] = useState(false)
  const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(false)
  const [isSuccessAlertOpen, setIsSuccessAlertOpen] = useState(false)
  const [selectedTitre, setSelectedTitre] = useState(null)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')

  const handleCommentsDialog = (titreId, titre, action) => {
    setSelectedTitre({id: titreId, titre})

    if (action === 'write') {
      setIsWriteCommentsOpen(true)
    } else if (action === 'read') {
      console.log('read comment')
      setIsReadCommentsOpen(true)
    }
  }

  return (
    <>
      {error && <AuthAlert
        isOpen={isErrorAlertOpen}
        setIsOpen={setIsErrorAlertOpen}
        message={error}
        severity='error'
      />}

      {success && <AuthAlert
        isOpen={isSuccessAlertOpen}
        setIsOpen={setIsSuccessAlertOpen}
        message={success}
        severity='success'
      />}

      <Box>
        {konstitisyon.map(({titreId, titre, articles}) => (
          <Paper key={titreId} variant='outlined' sx={{p: 1, marginBlock: 2}} p={2} >
            <Titre session={session} titreId={titreId} titre={titre} />
            {articles.map(({id, numero, contenu}) => (
              <Article key={id} session={session} articleId={id} numero={numero} contenu={contenu} />
            ))}
            {session && (
              <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
                <Box>
                  <IconButton size='large' aria-label='Voir les commentaires' onClick={() => handleCommentsDialog(titreId, titre, 'read')}>
                    <LightTooltip title='Voir les commentaires'>
                      <CommentIcon color='warning' fontSize='inherit' />
                    </LightTooltip>
                  </IconButton>
                </Box>
                <Box>
                  <IconButton size='large' aria-label='commenter' onClick={() => handleCommentsDialog(titreId, titre, 'write')}>
                    <LightTooltip title='Commenter'>
                      <AddCommentIcon color='warning' fontSize='inherit' />
                    </LightTooltip>
                  </IconButton>
                </Box>
              </Box>
            )}
          </Paper>
        ))}
        {selectedTitre && (
          <>
            <HandleComments
              session={session}
              selectedTitre={selectedTitre}
              isOpen={isWriteCommentsOpen}
              setIsOpen={setIsWriteCommentsOpen}
              setError={setError}
              setSuccess={setSuccess}
              setIsErrorAlertOpen={setIsErrorAlertOpen}
              setIsSuccessAlertOpen={setIsSuccessAlertOpen}
            />
            <CommentsList
              session={session}
              selectedTitre={selectedTitre}
              isOpen={isReadCommentsOpen}
              setIsOpen={setIsReadCommentsOpen}
              setError={setError}
              setSuccess={setSuccess}
              setIsErrorAlertOpen={setIsErrorAlertOpen}
              setIsSuccessAlertOpen={setIsSuccessAlertOpen}
            />
          </>
        )}
      </Box>
    </>
  )
}

Konstitisyon.propTypes = {
  session: PropTypes.object,
  titres: PropTypes.object.isRequired,
  articles: PropTypes.object.isRequired
}