'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 './edit/titre.js'
import Article from './edit/article.js'
import HandleCreate from './create/handle-create.js'
import ListComments from './list-comments.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 [isDialogOpen, setIsDialogOpen] = useState(false)
  const [operation, setOperation] = useState(null)
  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})
    setOperation(action)
    setIsDialogOpen(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} contenu={titre} />
            {articles.map(({id, numero, contenu}) => (
              <Article key={id} session={session} articleId={id} numero={numero} contenu={contenu} />
            ))}
            {session && (
              <Box sx={{display: 'flex', justifyContent: 'flex-end'}}>
                <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, 'create')}>
                    <LightTooltip title='Commenter'>
                      <AddCommentIcon color='warning' fontSize='inherit' />
                    </LightTooltip>
                  </IconButton>
                </Box>
              </Box>
            )}
          </Paper>
        ))}
        {selectedTitre && operation === 'create' && (
          <HandleCreate
            session={session}
            selectedTitre={selectedTitre}
            isOpen={isDialogOpen}
            setIsOpen={setIsDialogOpen}
            setError={setError}
            setSuccess={setSuccess}
            setIsErrorAlertOpen={setIsErrorAlertOpen}
            setIsSuccessAlertOpen={setIsSuccessAlertOpen}
            collection='commentaires'
          />
        )}

        {selectedTitre && operation === 'read' && (
          <ListComments
            session={session}
            selectedTitre={selectedTitre}
            isOpen={isDialogOpen}
            setIsOpen={setIsDialogOpen}
            setError={setError}
            setIsErrorAlertOpen={setIsErrorAlertOpen}
          />
        )}
      </Box>
    </>
  )
}

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