'use client'

import {useRef} from 'react'
import PropTypes from 'prop-types'
import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
import Dialog from '@mui/material/Dialog'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogContentText from '@mui/material/DialogContentText'
import DialogTitle from '@mui/material/DialogTitle'
import LogoutCountdown from '../../session/logout-countdown.js'
import {handleSubmit} from '@/lib/directus.js'
import {formatFormContent} from '@/lib/format.js'

export default function CreateForm({
  session,
  selectedTitre,
  isOpen,
  setIsOpen,
  setError,
  setSuccess,
  setIsErrorAlertOpen,
  setIsSuccessAlertOpen,
  dialogText,
  collection,
  title,
  label
}) {
  const countdownRef = useRef()

  const handleClose = () => {
    setIsOpen(false)
  }

  const handleFormSubmit = async e => {
    e.preventDefault()
    let requestObject

    const formattedContent = formatFormContent(e.currentTarget)

    if (collection === 'commentaires') {
      requestObject = {
        text: formattedContent,
        titre: selectedTitre,
        status: 'draft',
      }
    }

    await handleSubmit({
      accessToken: session.user.accessToken,
      content: formattedContent,
      collection,
      requestObject,
      setError,
      setSuccess,
      setIsErrorAlertOpen,
      setIsSuccessAlertOpen,
      countdownRef,
    })

    handleClose()
  }

  return (
    <>
      <Dialog
        open={isOpen}
        PaperProps={{
          component: 'form',
          onSubmit: handleFormSubmit,
        }}
        onClose={handleClose}
      >
        <DialogTitle>{title}</DialogTitle>
        <DialogContent sx={{color: 'white'}}>
          <DialogContentText sx={{color: 'white'}}>
            {dialogText}
          </DialogContentText>
          <TextField
            autoFocus
            required
            multiline
            fullWidth
            mt={2}
            rows={4}
            id='content'
            name='content'
            label={label}
          />
        </DialogContent>
        <DialogActions>
          <Button variant='contained' color='success' onClick={handleClose}>Annuler</Button>
          <Button variant='contained' color='error' type='submit'>Valider</Button>
        </DialogActions>
      </Dialog>
      <LogoutCountdown ref={countdownRef} setError={setError} setIsErrorAlertOpen={setIsErrorAlertOpen} />
    </>
  )
}

CreateForm.propTypes = {
  session: PropTypes.object,
  selectedTitre: PropTypes.object.isRequired,
  isOpen: PropTypes.bool.isRequired,
  setIsOpen: PropTypes.func.isRequired,
  setError: PropTypes.func.isRequired,
  setSuccess: PropTypes.func,
  setIsErrorAlertOpen: PropTypes.func.isRequired,
  setIsSuccessAlertOpen: PropTypes.func,
  dialogText: PropTypes.string.isRequired,
  collection: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired
}