'use client'

import PropTypes from 'prop-types'
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 Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
import Titre from './titre.js'
import Article from './article.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)

  return (
    <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={{textAlign: 'right'}}>
              <IconButton size='large' aria-label='commenter'>
                <LightTooltip title='Commenter'>
                  <AddCommentIcon color='warning' fontSize='inherit' />
                </LightTooltip>
              </IconButton>
            </Box>
          )}
        </Paper>
      ))}
    </Box>
  )
}

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