'use client'

import {useState} from 'react'
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'
import HandleEdit from './handle-edit.js'
import AuthAlert from '@/components/auth-form/auth-alert.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 Edit({id, session, contenu, collection}) {
  const router = useRouter()
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(false)
  const [isSuccessAlertOpen, setIsSuccessAlertOpen] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')

  const handleClick = () => {
    console.log('🚀 ~ Edit ~ id:', id)
    console.log('🚀 ~ Edit ~ contenu:', contenu)
    console.log('🚀 ~ Edit ~ collection:', collection)
    setIsDialogOpen(true)
    if (!session) {
      router.push('/login')
    }
  }

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

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

      <IconButton size='large' aria-label='edit' onClick={handleClick}>
        {collection === 'titres' && (
          <LightTooltip title='Éditer un titre'>
            <TitleIcon color='warning' fontSize='inherit' />
          </LightTooltip>
        )}

        {collection === 'articles' && (
          <LightTooltip title='Éditer un article'>
            <ArticleIcon color='warning' fontSize='inherit' />
          </LightTooltip>
        )}
      </IconButton>
      <HandleEdit
        id={id}
        session={session}
        contenu={contenu}
        collection={collection}
        isOpen={isDialogOpen}
        setIsOpen={setIsDialogOpen}
        setError={setError}
        setSuccess={setSuccess}
        setIsErrorAlertOpen={setIsErrorAlertOpen}
        setIsSuccessAlertOpen={setIsSuccessAlertOpen}
      />
    </>
  )
}

Edit.propTypes = {
  id: PropTypes.string.isRequired,
  session: PropTypes.object.isRequired,
  contenu: PropTypes.string.isRequired,
  collection: PropTypes.oneOf(['titres', 'articles']).isRequired
}