'use client'

import PropTypes from 'prop-types'
import {useRouter} from 'next/navigation'
import IconButton from '@mui/material/IconButton'
import {styled} from '@mui/material/styles'
import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
import ArticleIcon from '@mui/icons-material/Article'
import TitleIcon from '@mui/icons-material/Title'

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 Edit({titre, article, session}) {
  const router = useRouter()

  const handleClick = () => {
    console.log('titre', titre)
    console.log('article', article)
    if (!session) {
      router.push('/login')
    }
  }

  return (
    <IconButton size='large' aria-label='edit' onClick={handleClick}>
      {titre ? (
        <LightTooltip title='Éditer un titre'>
          <TitleIcon color='warning' fontSize='inherit' />
        </LightTooltip>
      ) : (
        <LightTooltip title='Éditer un article'>
          <ArticleIcon color='warning' fontSize='inherit' />
        </LightTooltip>
      )}
    </IconButton>
  )
}

Edit.propTypes = {
  titre: PropTypes.string,
  article: PropTypes.string,
  session: PropTypes.object.isRequired
}